From the sandbox link here, I am getting a React is not defined error. I have verified that I have the necessary import and package dependency installed. What am I missing here?

CodePudding user response：

For reference, your index.tsx looks like

import App from "./App";
import ReactDOM from 'react-dom';
import React from 'react';

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

Let's address the three problems here before proceeding:

1. You need a comma after </React.StrictMode>
2. In index.html, there is no element with ID root, but there is one called app
3. Since you're using typescript, you need types for all your import. In particular, you need to add @types/react-dom to your project

As to your React is not defined issue, you need to replace "jsx": "react-jsx", in tsconfig.json with "jsx": "react",. Putting it all together, your index.tsx should look like this

import App from "./App";
import React from "react";
import ReactDOM from "react-dom";

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

and tsconfig.json should look like this

{
  "include": [
    "./src/**/*"
  ],
  "compilerOptions": {
    "strict": true,
    "module": "commonjs",
    "jsx": "react",
    "esModuleInterop": true,
    "sourceMap": true,
    "allowJs": true,
    "lib": [
      "es6",
      "dom"
    ],
    "rootDir": "src",
    "moduleResolution": "node"
  }
}

Here's a working sandbox.