create-react-app 和 TypeScript 错误：使用 JSX 时“React”必须在范围内

Question

I initialised a React project with TypeScript using the CLI command create-react-app client --typescript . Then, I ran npm start but received the following compilation error:

./src/App.js
  Line 26:13:  'React' must be in scope when using JSX  react/react-in-jsx-scope

I did not even modify the boilerplate project provided by create-react-app other than removing unnecessary logo files, and my previous React apps done using TypeScript compiled just fine. Below is my App.tsx and index.tsx file: (note that the logo in App.tsx was removed, and I did not touch index.tsx )

index.tsx:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: 
serviceWorker.unregister();

App.tsx:

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
        Lorem
    </div>
  );
}

export default App;

React and ReactDOM are imported, so what caused this error?

Edit:

I found out that npm start , which runs react-scripts start , is compiling my .tsx files into .js files, which probably caused this issue. What might have caused the above behaviour?

Answer 1

try

const RootApp:React.FC = () => {
  return (
     <React.StrictMode>
    <App />
  </React.StrictMode>
  );
}

render(<RootApp />, document.getElementById("root"));