Upgrade react.

.eslintrc.js

@@ -1,37 +1,19 @@
 module.exports = {
   root: true,
-  parser: "@typescript-eslint/parser", // Specifies the ESLint parser
-  parserOptions: {
-    tsconfigRootDir: __dirname,
-    project: ["./tsconfig.json"],
-    ecmaVersion: 6, // Allows for the parsing of modern ECMAScript features
-    sourceType: "module", // Allows for the use of imports
-    ecmaFeatures: {
-      jsx: true, // Allows for the parsing of JSX
-    },
-  },
-  settings: {
-    react: {
-      version: "detect", // Tells eslint-plugin-react to automatically detect the version of React to use
-    },
-  },
   extends: [
-    "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
-    "plugin:@typescript-eslint/recommended", // Uses the recommended rules from @typescript-eslint/eslint-plugin
-    "plugin:@typescript-eslint/recommended-requiring-type-checking",
-    "plugin:prettier/recommended", // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
+    "react-app",
+    "react-app/jest"
   ],
   rules: {
-    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
     "@typescript-eslint/explicit-function-return-type": "off",
-    "@typescript-eslint/restrict-plus-operands": "off", // KEEP
-    "@typescript-eslint/require-await": "off", // KEEP
-    "@typescript-eslint/no-unused-vars": "off", // KEEP
-    "@typescript-eslint/no-empty-function": "off", // KEEP
-    "@typescript-eslint/no-unsafe-return": "off", // Reconsider
-    "@typescript-eslint/unbound-method": "off", // Reconsider
-    "@typescript-eslint/no-var-requires": "off", // KEEP
-    "@typescript-eslint/await-thenable": "off", // KEEP
-    "@typescript-eslint/no-non-null-assertion": "off", // KEEP
-  },
+    "@typescript-eslint/restrict-plus-operands": "off",
+    "@typescript-eslint/require-await": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-unsafe-return": "off",
+    "@typescript-eslint/unbound-method": "off",
+    "@typescript-eslint/no-var-requires": "off",
+    "@typescript-eslint/await-thenable": "off",
+    "@typescript-eslint/no-non-null-assertion": "off"
+  }
 };

package.json

@@ -12,7 +12,7 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.0.4",
     "@testing-library/user-event": "^12.1.6",
-    "@types/react-dom": "^17.0.2",
+    "@types/react-dom": "^17.0.0",
     "@types/react-redux": "^7.1.11",
     "@types/react-router-dom": "^5.1.6",
     "@types/react-router-hash-link": "^1.2.1",
@@ -25,17 +25,17 @@
     "react-redux": "^7.2.1",
     "react-router-dom": "^5.2.0",
     "react-router-hash-link": "^2.2.2",
-    "react-scripts": "^3.4.3",
+    "react-scripts": "^5.0.1",
     "redux": "^4.0.5",
-    "typescript": "^4.0.3"
+    "typescript": "^4.9.5"
   },
   "scripts": {
-    "start": "NODE_OPTIONS=--openssl-legacy-provider react-scripts start",
+    "start": "react-scripts start",
     "lint": "eslint '*/**/*.{js,ts,tsx}' --max-warnings=0",
     "fix-lint": "eslint --fix '*/**/*.{js,ts,tsx}' --max-warnings=0",
-    "build": "NODE_OPTIONS=--openssl-legacy-provider PUBLIC_URL=./ react-scripts build",
-    "test": "NODE_OPTIONS=--openssl-legacy-provider react-scripts test",
-    "test:jenkins": "NODE_OPTIONS=--openssl-legacy-provider react-scripts test --ci ---coverage --reporters=default --reporters=jest-junit",
+    "build": "PUBLIC_URL=./ react-scripts build",
+    "test": "react-scripts test",
+    "test:jenkins": "react-scripts test --ci ---coverage --reporters=default --reporters=jest-junit",
     "cypress": "cypress run",
     "test:ci": "start-server-and-test 'yarn start' 3000 'yarn cypress'",
     "eject": "react-scripts eject"
@@ -56,20 +56,17 @@
     ]
   },
   "devDependencies": {
+    "@types/react": "^17.0.0",
     "cypress": "^8.6.0",
-    "eslint": "6",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-config-react-app": "^5.2.1",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.20.6",
-    "eslint-plugin-react-app": "^6.2.2",
-    "eslint-plugin-react-hooks": "^4.1.0",
     "jest-junit": "^12.0.0",
     "prettier": "^2.1.1",
     "start-server-and-test": "^1.14.0"
   },
   "resolutions": {
     "**/react": "17.0.2",
-    "**/react-dom": "17.0.2"
+    "**/react-dom": "17.0.2",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@types/babel__traverse": "7.20.7"
   }
 }

src/components/navigation/LibraryNavigation.tsx

@@ -22,7 +22,7 @@ const useStyles = makeStyles((theme: Theme) =>
 
 export type LibraryNavigationProps = {
   library: Library;
-  openLibrary: string;
+  openLibrary?: string;
 };
 
 const LibraryNavigation: React.FC<LibraryNavigationProps> = ({

src/components/navigation/NavigationView.tsx

@@ -31,7 +31,7 @@ const Title = styled.div`
 `;
 
 export type NavigationParams = {
-  libraryName: string;
+  libraryName?: string;
 };
 
 export type NavigationProps = {

tsconfig.json

@@ -13,7 +13,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react-jsx"
   },
   "include": ["src", "cypress"]
 }