React@18 (17^) auto React import for JSX does not work

0
votes

Somehow my React imports using React 18 with TS are always greyed out. I know that you usually don't have to import React any more for writing JSX, but if I don't import it, it literally marks all JSX red and logs "'React' must be in scope when using JSX".

Now the code does not get marked but the browser still throws the same error for each TSX element: enter image description here

package.json:

{
  "name": "ts-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.3",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.4.1",
    "@types/node": "^16.11.26",
    "@types/react": "^17.0.43",
    "@types/react-dom": "^17.0.14",
    "axios": "^0.26.1",
    "framer-motion": "^6.2.8",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.0",
    "redux": "^4.1.2",
    "typescript": "^4.6.3",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "tailwindcss": "^3.0.23"
  }
}

What I've tried:

  • added react/jsx-runtime as a plugin to my eslintrc extends

Any ideas of what could be wrong there?

javascriptreactjstypescriptjsxcreate-react-app
try adding "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".tsx"] }] to your eslintrc – Ross
What are your dependencies in package.json? What version of react-scripts do you have? – Phil
I´ve edited the package.json in the question body – CantSolveMyProblems
Can't reproduce this unfortunately. Have you tried nuking your installed dependencies and re-installing... rm -r node_modules package-lock.json && npm i (or the yarn equivalent)? – Phil
Yeah I don´t know what went wrong there. I just reinstalled my node modules and everything worked fine. I think something was off with my eslint bc it was having problems before as well and probably didn´t configure properly. Thanks! – CantSolveMyProblems