Upgraded to Next v12, React v18, and Scripture-Tsv v1.2.0

.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  'extends': [
+  extends: [
     'eslint-config-react-app',
     'eslint:recommended',
     'plugin:react/recommended',
@@ -8,22 +8,22 @@ module.exports = {
     'prettier',
     'prettier/react',
     'plugin:cypress/recommended',
+    'next/core-web-vitals',
   ],
-  'parser': 'babel-eslint',
-  'parserOptions': {
-    'ecmaVersion': 2018,
-    'ecmaFeatures': {
-      'impliedStrict': true,
-      'classes': true,
+  parserOptions: {
+    ecmaVersion: 2018,
+    ecmaFeatures: {
+      impliedStrict: true,
+      classes: true,
     },
   },
-  'env': {
-    'browser': true,
-    'node': true,
-    'es6': true,
-    'jest': true,
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+    jest: true,
   },
-  'plugins': [
+  plugins: [
     'react',
     'jest',
     'prettier',
@@ -32,30 +32,42 @@ module.exports = {
     'jsdoc',
     'cypress',
   ],
-  'rules': {
+  rules: {
     'array-callback-return': 'error',
     'no-await-in-loop': 'error',
-    'object-curly-newline': ['error', { 'multiline': true, 'minProperties': 3 }],
-    'brace-style': ['error', '1tbs', { 'allowSingleLine': false }],
+    'object-curly-newline': ['error', { multiline: true, minProperties: 3 }],
+    'brace-style': ['error', '1tbs', { allowSingleLine: false }],
     'no-return-await': 'error',
     'quote-props': ['error', 'consistent'],
     'require-await': 'error',
     'no-async-promise-executor': 'error',
     'no-throw-literal': 'warn',
     'no-nested-ternary': 'error',
-    'no-duplicate-imports': ['error', { 'includeExports': false }],
-    'import/order': ['error', { 'groups': [ 'builtin', 'external', 'internal', 'parent', 'sibling', 'index' ] }],
+    'no-duplicate-imports': ['error', { includeExports: false }],
+    'import/order': [
+      'error',
+      {
+        groups: [
+          'builtin',
+          'external',
+          'internal',
+          'parent',
+          'sibling',
+          'index',
+        ],
+      },
+    ],
     'import/first': 'off',
     'import/default': 'off',
     'import/namespace': 'off',
-    'indent': ['error', 2],
+    indent: ['error', 2],
     'react/no-find-dom-node': 'warn',
     'no-undef': 'error',
     'no-unused-vars': 'error',
     'no-debugger': 'warn',
     'react/prop-types': 'error',
-    'curly': 'error',
-    'semi': ['error', 'never'],
+    curly: 'error',
+    semi: ['error', 'never'],
     'semi-style': ['error', 'last'],
     'no-console': 'off',
     'react/jsx-uses-react': 'error',
@@ -64,50 +76,61 @@ module.exports = {
     'no-prototype-builtins': 'off',
     'react/no-unescaped-entities': 'off',
     'object-curly-spacing': ['error', 'always'],
-    'quotes': ['error', 'single', { 'allowTemplateLiterals': true }],
+    quotes: ['error', 'single', { allowTemplateLiterals: true }],
     'comma-dangle': ['error', 'always-multiline'],
     'keyword-spacing': 'error',
     'no-multi-spaces': 'error',
     'no-trailing-spaces': 'error',
     'arrow-body-style': ['error', 'as-needed'],
-    'space-before-function-paren': ['error', {
-      'anonymous': 'always', 'named': 'never', 'asyncArrow': 'always',
-    }],
+    'space-before-function-paren': [
+      'error',
+      {
+        anonymous: 'always',
+        named: 'never',
+        asyncArrow: 'always',
+      },
+    ],
     'no-return-assign': 'error',
     'padding-line-between-statements': [
       'error',
       {
-        'blankLine': 'always', 'prev': '*', 'next': ['function', 'if', 'for', 'while', 'switch', 'try' ],
+        blankLine: 'always',
+        prev: '*',
+        next: ['function', 'if', 'for', 'while', 'switch', 'try'],
       },
       {
-        'blankLine': 'always', 'prev': ['const', 'let', 'var'], 'next': ['block', 'block-like', 'multiline-expression'],
+        blankLine: 'always',
+        prev: ['const', 'let', 'var'],
+        next: ['block', 'block-like', 'multiline-expression'],
       },
       {
-        'blankLine': 'always', 'prev': ['block', 'block-like', 'multiline-expression'] , 'next':['const', 'let', 'var'],
+        blankLine: 'always',
+        prev: ['block', 'block-like', 'multiline-expression'],
+        next: ['const', 'let', 'var'],
       },
     ],
     'padded-blocks': ['error', 'never'],
     'no-unused-expressions': 'error',
-    'func-names':'off',
+    'func-names': 'off',
     'no-underscore-dangle': 'off',
     'consistent-return': 'off',
-    'radix': 'off',
+    radix: 'off',
     'guard-for-in': 'off',
     'react-hooks/rules-of-hooks': 'error',
     'react-hooks/exhaustive-deps': 'warn',
     'jsx-a11y/anchor-has-content': 'off',
     'jsx-a11y/anchor-is-valid': 'off',
     'no-mixed-operators': 'off',
     'jsx-a11y/alt-text': 'off',
-    'eqeqeq': 'off',
+    eqeqeq: 'off',
     'jsdoc/require-returns-type': 'warn',
     'jsdoc/valid-types': 'warn',
   },
-  'settings': {
-    'react': {
-      'createClass': 'createReactClass', // Regex for Component Factory to use, default to "createReactClass"
-      'pragma': 'React', // Pragma to use, default to "React"
-      'version': 'detect', // React version, default to the latest React stable release
+  settings: {
+    react: {
+      createClass: 'createReactClass', // Regex for Component Factory to use, default to "createReactClass"
+      pragma: 'React', // Pragma to use, default to "React"
+      version: 'detect', // React version, default to the latest React stable release
     },
   },
 }

.github/workflows/main.yml

@@ -13,7 +13,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.19.0]
+        node-version: [20.12.2]
     steps:
       - uses: actions/setup-node@v2.1.5
         with:

jest.config.js

@@ -1,37 +1,34 @@
 module.exports = {
-  'roots': ['<rootDir>'],
-  // 'transform': { '^.+\\.ts?$': 'ts-jest' },
-  'moduleFileExtensions': [
-    'js',
-    'ts',
-  ],
-  'coveragePathIgnorePatterns': [
+  roots: ['<rootDir>'],
+  transform: {
+    '^.+\\.(t|j)sx?$': ['@swc/jest'],
+  },
+  moduleFileExtensions: ['js', 'ts'],
+  coveragePathIgnorePatterns: [
     '/node_modules/',
     '/.yalc/',
     'scripts',
     'cypress',
   ],
-  'testPathIgnorePatterns': [
+  testPathIgnorePatterns: [
     '/node_modules/',
     'components',
     'cypress',
     '/.yalc/',
     'scripts',
   ],
-  'testMatch': [
-    '**/?(*.)+(spec|test).[jt]s?(x)',
-  ],
-  'moduleNameMapper': {
+  testMatch: ['**/?(*.)+(spec|test).[jt]s?(x)'],
+  moduleNameMapper: {
     '^@common/(.*)$': '<rootDir>/src/common/$1',
     '^@components/(.*)$': '<rootDir>/src/components/$1',
     '^@context/(.*)$': '<rootDir>/src/context/$1',
     '^@hooks/(.*)$': '<rootDir>/src/hooks/$1',
     '^@utils/(.*)$': '<rootDir>/src/utils/$1',
   },
-  'collectCoverageFrom': [
+  collectCoverageFrom: [
     './src/**.{js,jsx,ts}',
     '!**/node_modules/**',
     '!**/vendor/**',
   ],
-  'coverageDirectory': 'jest-coverage',
+  coverageDirectory: 'jest-coverage',
 }

netlify.toml

@@ -1,3 +1,6 @@
+[build.environment]
+     NODE_VERSION = "20.12.0"
+
 [build]
   command = "npm run build"
   publish = "out"

next.config.js

@@ -1,9 +1,12 @@
 module.exports = {
-  target: 'serverless',
   webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
     // Note: we provide webpack above so you should not `require` it
     // Perform customizations to webpack config
-    config.plugins.push(new webpack.IgnorePlugin(/canvas/))
+    config.plugins.push(
+      new webpack.IgnorePlugin({
+        resourceRegExp: /canvas/,
+      })
+    )
 
     // Important: return the modified config
     return config

package.json

@@ -1,6 +1,9 @@
 {
   "name": "gateway-edit",
-  "version": "2.3.0",
+  "version": "2.4.0",
+  "engines": {
+    "node": ">=18.18.0"
+  },
   "scripts": {
     "dev": "bash -c \"source ./scripts/set-env.sh && next\"",
     "build": "bash -c \"source ./scripts/set-env.sh && next build\"",
@@ -35,45 +38,44 @@
     "@mui/styles": "^5.8.7",
     "@sendgrid/mail": "^7.4.2",
     "autoprefixer": "^10.1.0",
-    "bible-reference-rcl": "1.3.0",
+    "bible-reference-rcl": "1.4.0",
     "core-js": "^3.8.3",
     "deep-equal": "^2.0.5",
     "gitea-react-toolkit": "2.4.0",
     "localforage": "^1.9.0",
     "markdown-translatable": "2.0.3",
-    "next": "10.2.0",
+    "next": "12",
     "postcss": "^8.2.1",
-    "react": "^17.0.2",
+    "react": "18",
     "react-bootstrap": "0.32.4",
-    "react-dom": "^17.0.2",
+    "react-dom": "18",
     "react-draggable": "^4.4.5",
     "react-icons": "^4.8.0",
     "regenerator-runtime": "^0.13.7",
     "resource-workspace-rcl": "2.1.4",
     "scripture-resources-rcl": "5.5.9",
-    "scripture-tsv": "1.0.3",
+    "scripture-tsv": "1.2.0",
     "single-scripture-rcl": "3.4.19",
     "tailwindcss": "^2.0.4",
     "tc-ui-toolkit": "5.3.3",
-    "translation-helps-rcl": "3.5.16",
+    "translation-helps-rcl": "3.6.0",
     "use-deep-compare-effect": "^1.3.1",
     "word-aligner": "^1.0.0",
     "word-aligner-rcl": "1.0.4"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.8",
-    "@babel/preset-env": "^7.15.8",
     "@cypress/code-coverage": "^3.9.11",
     "@cypress/instrument-cra": "^1.4.0",
+    "@next/bundle-analyzer": "^14.2.3",
+    "@swc/core": "^1.4.17",
+    "@swc/jest": "^0.2.36",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.1.2",
     "@types/jest": "^27.0.2",
-    "babel-eslint": "^10.1.0",
-    "babel-jest": "^27.3.1",
-    "babel-plugin-istanbul": "^6.1.1",
     "cross-env": "7.0.3",
     "cypress": "^8.6.0",
     "eslint": "^7.16.0",
+    "eslint-config-next": "12",
     "eslint-config-prettier": "^7.1.0",
     "eslint-config-react-app": "^6.0.0",
     "eslint-plugin-cypress": "^2.12.1",

src/components/AccountSetup.js

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
 import Button from '@material-ui/core/Button'
-import Paper from 'translation-helps-rcl/dist/components/Paper'
+import { Paper } from 'translation-helps-rcl'
 import SaveIcon from '@material-ui/icons/Save'
 import { StoreContext } from '@context/StoreContext'
 import TranslationSettings from '@components/TranslationSettings'

src/components/ErrorPopUp.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import Button from '@material-ui/core/Button'
-import DraggableCard from 'translation-helps-rcl/dist/components/DraggableCard'
+import { DraggableCard } from 'translation-helps-rcl'
 import { CANCEL } from '@common/constants'
 
 export default function ErrorPopup(

src/components/Onboarding.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import dynamic from 'next/dynamic'
-import Paper from 'translation-helps-rcl/dist/components/Paper'
+import { Paper } from 'translation-helps-rcl'
 import CircularProgress from '@components/CircularProgress'
 
 const AccountSetup = dynamic(() => import('@components/AccountSetup'), {

src/components/TranslationSettings.js

@@ -1,6 +1,6 @@
 import React, { useContext, useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
-import Paper from 'translation-helps-rcl/dist/components/Paper'
+import { Paper } from 'translation-helps-rcl'
 import FormControl from '@material-ui/core/FormControl'
 import { makeStyles } from '@material-ui/core/styles'
 import InputLabel from '@material-ui/core/InputLabel'

src/utils/build.js

@@ -1,4 +1,5 @@
-import { version } from '../../package.json'
+import pkg from '../../package.json'
+const { version } = pkg
 
 export function getBuildId() {
   const hash = getCommitHash()