'React' must be in scope when using JSX but I do not use ESLint-CodePudding

I have read in react docs and here on stackoverflow that for my existing error: 'React' must be in scope when using JSX I should disable some ESLint things but I have unistalled ESLint completely from VSCode and I still get the error.

I created a simple react app using create react app with typescript and react-router-dom. React is v.17

Here is my code:

src/index.tsx

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);

src/App.tsx

import "./App.css";
import { Route, Routes } from "react-router-dom";
import Home from "views/Home";

function App() {
  return (
    <Routes>
      <Route path="/" element={Home} />
    </Routes>
  );
}

export default App;

src/views/Home.tsx

const Home = () => {
  return <div>Home</div>;
};

export default Home;

If I import import React from "react"; on top of App.tsx and Home.tsx then it compiles without a problem. But I am not satisfied with that solution since I am using React v.17

CodePudding user response：

Eslint is bundled into create react app, you would need to eject and disable the rule manually if you want it to disappear.

CodePudding user response：

This is the dependencies of Creact React App. If you eject your CRA app, you can see this list in Package.json. As you can see below, Eslint is in it! So even though you uninstalled eslint from plugin, it's still working behind CRA app. If you want eslint off, you should eject your CRA App and uninstall it but you should know you can't wrap ejected CRA App again and it's too difficult to maintain ejected CRA files. So, my answer is you should put import React from 'react' to all files or you should build your own React project with Webpack, babel.. etc but you know it takes learning time.

{
  "dependencies": {
    "@babel/core": "^7.16.0",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
    "@svgr/webpack": "^5.5.0",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^12.0.0",
    "@testing-library/user-event": "^13.2.1",
    "babel-jest": "^27.4.2",
    "babel-loader": "^8.2.3",
    "babel-plugin-named-asset-import": "^0.3.8",
    "babel-preset-react-app": "^10.0.1",
    "bfj": "^7.0.2",
    "browserslist": "^4.18.1",
    "camelcase": "^6.2.1",
    "case-sensitive-paths-webpack-plugin": "^2.4.0",
    "css-loader": "^6.5.1",
    "css-minimizer-webpack-plugin": "^3.2.0",
    "dotenv": "^10.0.0",
    "dotenv-expand": "^5.1.0",
    "eslint": "^8.3.0",
    "eslint-config-react-app": "^7.0.0",
    "eslint-webpack-plugin": "^3.1.1",
    "file-loader": "^6.2.0",
    "fs-extra": "^10.0.0",
    "html-webpack-plugin": "^5.5.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^27.4.3",
    "jest-resolve": "^27.4.2",
    "jest-watch-typeahead": "^1.0.0",
    "mini-css-extract-plugin": "^2.4.5",
    "postcss": "^8.4.4",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-loader": "^6.2.1",
    "postcss-normalize": "^10.0.1",
    "postcss-preset-env": "^7.0.1",
    "prompts": "^2.4.2",
    "react": "^17.0.2",
    "react-app-polyfill": "^3.0.0",
    "react-dev-utils": "^12.0.0",
    "react-dom": "^17.0.2",
    "react-refresh": "^0.11.0",
    "resolve": "^1.20.0",
    "resolve-url-loader": "^4.0.0",
    "sass-loader": "^12.3.0",
    "semver": "^7.3.5",
    "source-map-loader": "^3.0.0",
    "style-loader": "^3.3.1",
    "tailwindcss": "^3.0.2",
    "terser-webpack-plugin": "^5.2.5",
    "web-vitals": "^2.1.0",
    "webpack": "^5.64.4",
    "webpack-dev-server": "^4.6.0",
    "webpack-manifest-plugin": "^4.0.2",
    "workbox-webpack-plugin": "^6.4.1"
  },  
}