build: upgrade react-scripts to v4

This also updates to React 17, eslint 7, TypeScript v4, etc.
- React 17 has no new features, but does have a few breaking changes that shouldn't affect bsd. (https://reactjs.org/blog/2020/10/20/react-v17.html)
- eslint 7 and the updated config caused a minor issue (https://stackoverflow.com/a/64024916/549363)
- react-scripts v4 seems to have a bug while validating TS config, which this commit works around (facebook/create-react-app#9429)

.eslintignore

@@ -1,3 +1,4 @@
+.eslintrc.js
 src/react-app-env.d.ts
 coverage
 types

.eslintrc.js

@@ -66,6 +66,9 @@ module.exports = {
     '@typescript-eslint/no-unused-vars': ['error', {
       'vars': 'all'
     }],
+    // note you must disable the base rule as it can report incorrect errors
+    "no-use-before-define": "off",
+    "@typescript-eslint/no-use-before-define": ["error"],
     'no-restricted-syntax': 'off',
     'react/destructuring-assignment': 'off',
     'react/jsx-boolean-value': [2, 'never'],

package.json

@@ -60,16 +60,16 @@
     "js-sha256": "^0.9.0",
     "normalize.css": "^8.0.1",
     "pluralize": "^7.0.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-dropzone": "^11.0.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-dropzone": "^11.2.1",
     "react-modal": "^3.11.2",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.1",
+    "react-scripts": "4.0.0",
     "rxjs": "^6.6.0",
     "styled-components": "^4.2.0",
     "ts-jest": "^26.1.3",
-    "typescript": "3.9.2",
+    "typescript": "4.0.3",
     "use-interval": "^1.2.1",
     "yauzl": "^2.10.0"
   },
@@ -80,18 +80,18 @@
     "@types/pify": "^3.0.2",
     "@types/react-router-dom": "^5.1.5",
     "@types/yauzl": "^2.9.1",
-    "@typescript-eslint/eslint-plugin": "^2.33.0",
-    "@typescript-eslint/parser": "^2.33.0",
+    "@typescript-eslint/eslint-plugin": "^4.5.0",
+    "@typescript-eslint/parser": "^4.5.0",
     "@votingworks/ballot-encoder": "^4.0.0",
-    "eslint": "^6.6.0",
-    "eslint-config-airbnb": "^18.1.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-jest": "^23.13.1",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-react": "^7.20.0",
-    "eslint-plugin-react-hooks": "^4.0.2",
+    "eslint": "^7.11.0",
+    "eslint-config-airbnb": "^18.2.0",
+    "eslint-config-prettier": "^6.14.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jest": "^24.1.0",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "fetch-mock": "^9.9.0",
     "history": "^4.10.1",
     "husky": "^4.2.5",

src/App.test.tsx

@@ -24,11 +24,13 @@ beforeEach(() => {
   })
 
   const oldWindowLocation = window.location
-  delete window.location
-  window.location = {
-    ...oldWindowLocation,
-    href: '/',
-  }
+  Object.defineProperty(window, 'location', {
+    value: {
+      ...oldWindowLocation,
+      href: '/',
+    },
+    configurable: true,
+  })
 })
 
 test('renders without crashing', async () => {
@@ -88,7 +90,6 @@ test('clicking Scan Batch will scan a batch', async () => {
   })
 
   const mockAlert = jest.fn()
-  delete window.alert
   window.alert = mockAlert
 
   await act(async () => {

tsconfig.json

@@ -5,15 +5,16 @@
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react",
     "lib": ["dom", "dom.iterable", "esnext"],
     "module": "esnext",
     "moduleResolution": "node",
     "noEmit": true,
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "strict": true,
-    "target": "es2017"
+    "target": "es2017",
+    "noFallthroughCasesInSwitch": true
   },
   "exclude": ["src/setupProxy.js", ".eslintrc.js"],
   "include": ["src", "prodserver", "test", "types"]