编译 create-react-app 项目时 TypeScript React 项目不确定的错误

Question

This is a bit of an unusual question but I'm having frequent problems with the typescript compiler (or maybe webpack, or related).

This happens to me about twice a day (the error messages are different each time):

1.) I do normal code changes. 2.) I receive some weird inexplicable bug - the most recent was:

Line 0: Parsing error: Cannot read property 'map' of undefined

3. Obviously, there is no code at line 0 anywhere in my modules except for import statements. But I check my file for all kinds of .map statements and try to find the bug, restart the development server a couple of times meanwhile (same error).
4. Eventually, the bug mysteriously disappears - in this case, I just commented all my import statements and uncommented them shortly after without changing anything else (I did not accidentally fix the bug).

This is happening multiple times a day now. I was on Typescript 4.0.2, now I've downgraded to 3.9.7.

Are there any ways to "reset" the compiler (eg delete temp files) that may solve this? I'm really not sure how to go about this.

I'm using create-react-app with the following dependencies:

"dependencies": {
    "@date-io/date-fns": "^1.3.13",
    "@date-io/moment": "^1.3.13",
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.56",
    "@material-ui/pickers": "^3.2.10",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/lodash": "^4.14.157",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.41",
    "@types/react-dom": "^16.9.0",
    "@types/react-redux": "^7.1.9",
    "@types/react-router-dom": "^5.1.5",
    "@types/recharts": "^1.8.14",
    "@types/redux-persist": "^4.3.1",
    "@types/styled-components": "^5.1.0",
    "@types/yup": "^0.29.3",
    "axios": "^0.19.2",
    "classnames": "^2.2.6",
    "date-fns": "^2.15.0",
    "formik": "^2.1.5",
    "lodash": "^4.17.15",
    "moment": "^2.27.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-intl": "^5.2.1",
    "react-redux": "^7.2.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^3.4.1",
    "recharts": "^1.8.5",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.3.0",
    "styled-components": "^5.1.1",
    "yup": "^0.29.1"
  },
"devDependencies": {
    "@testing-library/react": "^9.5.0",
    "typescript": "^3.9.7"
  }

My tsconfig:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "noImplicitAny": false,
    "baseUrl": "src"
  },
  "include": [
    "src"
  ]
}

Answer 1

The issue is react-scripts is using older versions of eslint. follow issue

@typescript-eslint/eslint-plugin": "^2.10.0"
@typescript-eslint/parser": "^2.10.0"

Note manually upgrading packages in project didn't work

react-script also gives peer dependency error

react-scripts@3.4.3 requires a peer of typescript@^3.9.2 but typescript@^4.0.2 was installed.

For now we can degrade to typescript@^3.9.2 till the time react-scripts support typescript@^4.0