CODEWITHSUNDEEP
reactjstypescriptcreate-react-app
Xen_mar
Xen_mar

Reputation: 9742

TypeScript React project inconclusive bugs when compiling create-react-app project

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

  1. 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).
  2. 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 (e. g. 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"
  ]
}

Upvotes: 0

Views: 2063

Answers (1)

Akshay Vijay Jain
Akshay Vijay Jain

Reputation: 16025

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

Upvotes: 3

Related Questions