upgrade CRA to v4

.eslintrc.js

@@ -25,5 +25,7 @@ module.exports = {
       },
     ],
     '@typescript-eslint/naming-convention': ['off'],
+    // remove once @joystream/eslint-config does not enforce an older version of @typescript-eslint
+    '@typescript-eslint/no-unused-vars': ['off'],
   },
 }

config-overrides.js

@@ -1,55 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const path = require('path')
-const {
-  override,
-  addBabelPreset,
-  addBabelPlugin,
-  addWebpackAlias,
-  disableEsLint,
-  addWebpackModuleRule,
-} = require('customize-cra')
-const eslintConfig = require('./.eslintrc.js')
-
-const modifiedEslintConfig = {
-  ...eslintConfig,
-  rules: {
-    ...eslintConfig.rules,
-    // mark prettier rule as a warning in config passed to webpack so wrong code formatting won't make dev server fail
-    'prettier/prettier': 'warn',
-  },
-}
-
-// based on https://github.com/arackaf/customize-cra/issues/175#issuecomment-610023655
-const customEslintConfig = (configRules) => {
-  if (process.env.CI) {
-    return disableEsLint()
-  }
-
-  return (config) => {
-    const updatedRules = config.module.rules.map((rule) => {
-      // Only target rules that have defined a `useEslintrc` parameter in their options
-      if (rule.use && rule.use.some((use) => use.options && use.options.useEslintrc !== undefined)) {
-        const ruleUse = rule.use[0]
-        const baseOptions = ruleUse.options
-        const baseConfig = baseOptions.baseConfig || {}
-        const newOptions = {
-          useEslintrc: false,
-          ignore: true,
-          baseConfig: { ...baseConfig, ...configRules },
-        }
-        ruleUse.options = newOptions
-        return rule
-
-        // Rule not using eslint. Do not modify.
-      } else {
-        return rule
-      }
-    })
-
-    config.module.rules = updatedRules
-    return config
-  }
-}
+const { override, addBabelPreset, addBabelPlugin, addWebpackAlias, addWebpackModuleRule } = require('customize-cra')
 
 module.exports = {
   webpack: override(
@@ -62,8 +13,7 @@ module.exports = {
       test: /\.(graphql|gql)$/,
       exclude: /node_modules/,
       loader: 'graphql-tag/loader',
-    }),
-    customEslintConfig(modifiedEslintConfig)
+    })
   ),
   paths: (paths) => {
     paths.appBuild = path.resolve(__dirname, 'dist')

package.json

@@ -66,8 +66,6 @@
     "@types/react-dom": "^16.9.0",
     "@types/react-transition-group": "^4.4.0",
     "@types/video.js": "^7.3.10",
-    "@typescript-eslint/eslint-plugin": "^3.5.0",
-    "@typescript-eslint/parser": "^3.2.0",
     "apollo": "^2.30.2",
     "babel-plugin-emotion": "^10.0.33",
     "csstype": "^3.0.0-beta.4",
@@ -76,12 +74,9 @@
     "emotion-normalize": "^10.1.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
-    "eslint": "^6.6.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-react": "^7.20.3",
-    "eslint-plugin-react-hooks": "^4.0.4",
     "faker": "^5.1.0",
     "fluent-ffmpeg": "^2.1.2",
     "glider-js": "^1.7.3",
@@ -89,7 +84,6 @@
     "graphql-tag": "^2.11.0",
     "graphql-tools": "^6.2.4",
     "husky": "^4.2.5",
-    "jest": "24.9.0",
     "lint-staged": "^10.2.7",
     "lodash": "^4.17.19",
     "miragejs": "^0.1.40",
@@ -100,7 +94,7 @@
     "react-dom": "^16.13.1",
     "react-error-boundary": "^3.0.2",
     "react-player": "^2.2.0",
-    "react-scripts": "3.4.1",
+    "react-scripts": "4.0.1",
     "react-spring": "^8.0.27",
     "react-transition-group": "^4.4.1",
     "storybook-addon-jsx": "^7.1.15",

tsconfig.json

@@ -2,11 +2,7 @@
   "extends": "./tsconfig.paths.json",
   "compilerOptions": {
     "target": "es2019",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "es2019"
-    ],
+    "lib": ["dom", "dom.iterable", "es2019"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -19,14 +15,9 @@
     "moduleResolution": "node",
     "sourceMap": true,
     "strict": true,
-    "jsx": "react"
+    "jsx": "react",
+    "noFallthroughCasesInSwitch": true
   },
-  "exclude": [
-    "node_modules",
-    "dist",
-    "src/shared/stories"
-  ],
-  "include": [
-    "src"
-  ]
+  "exclude": ["node_modules", "dist", "src/shared/stories"],
+  "include": ["src"]
 }