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+
