TypeScript Error 2304: Cannot find name 'div' - CRA TypeScript Template

Question

I'm having an issue in VSCode using the out-of-the-box create-react-app my-app --template typescript project not recognizing any element. I constantly get the error cannot find name xxx with 'xxx' being whatever the HTML element I'm using in the JSX.

What's interesting is that the project will run initially with zero edits. As soon as I actually go into App.tsx and change anything or create a very basic new component it breaks.

Here's a very basic component I attempted to make following this tutorial from the TypeScript Handbook Github.

// src/components/Hello.tsx
import React from 'react';

export const Hello = () => {
  return <h1>Hello < /h1>;
};

Once more this project is created directly from the recommended TypeScript template using create-react-app my-app --template typescript. No files were edited.

It came with their own tsconfig.json ready to go.

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

Of course they had their own package.json as well.

{
  "name": "ts-trial",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.52",
    "@types/react-dom": "^16.9.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3",
    "typescript": "4.0.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Once more no files were edited - I ran the command, cded into my new project, created Hello.tsx and as soon as I put an element in the return statement it said Cannot find name 'h1'. ts(2304).

Then I went to App.tsx and as soon as I opened it the same error was showing all over too.

I filed an issue on GitHub as I don't see how I could be getting this error honestly. I've searched for hours and most of the solutions I found weren't relevant for my particular issue. Most solutions were forgetting to change file extensions from .js or .ts to .tsx for React. Or they had to specify "@types/node": "^12.0.0" in package.json, or target, lib, module or include in tsconfig.json, all of which I have.

Environment Info:

System:

• OS: macOS 10.15.6
• CPU: (4) x64 Intel(R) Core(TM) i7-7660U CPU @ 2.50GHz

Binaries:

• Node: 14.6.0 - /usr/local/bin/node
• Yarn: 1.22.4 - /usr/local/bin/yarn
• npm: 6.14.7 - /usr/local/bin/npm

Browser:

• Firefox Developer Edition 82.0b7 (64-bit)

npmPackages:

• react: ^16.13.1 => 16.13.1
• react-dom: ^16.13.1 => 16.13.1
• react-scripts: 3.4.3 => 3.4.3

npmGlobalPackages:

• create-react-app: 3.4.1

Code Editor: VSCode

Answer 1

The file extension has to be .tsx in order for this to work.