CRA TypeScript template "cannot find name <element>"

[STLnick]

Describe the bug

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 initally with zero edits. As soon as I actually go into App.tsx and change anything or just save it breaks.

Did you try recovering your dependencies?

I ensured to attempt recovering dependencies, no effect on errors.

yarn --version
1.22.4

Which terms did you search for in User Guide?

'typescript 2304' / 'cannot find name' / 'not recognizing html elements' + many shorter combinations of these phrases.

Environment

Environment Info:

current version of create-react-app: 3.4.1 running from /Users/nickray/.config/yarn/global/node_modules/create-react-app

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 Browsers: Chrome: 86.0.4240.75 Firefox: Not Found Safari: 14.0 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

NOTE: I'm actually using Firefox Developer Edition 82.0b7 (64-bit)

Code Editor: VSCode

Steps to reproduce

1. Create new React App using TypeScript template -> create-react-app my-app --template typescript
2. Run yarn start or npm start to see the project works initially
3. Open VSCode (or your text editor), open App.tsx, change anything at all, and save.

Expected behavior

I expected to create a the very simple example found here in the TypeScript-Handbook basic tutorial. I didn't even open App.tsx initially and started by creating a new, very basic component only to find this error.

Actual behavior

I created a new react-app using the TypeScript template and was unable to make any basic changes without causing the 'cannot find name xxx' errors.

src/components/Hello.tsx

src/App.tsx

I didn't bother importing Hello into App since it wouldn't work with the existing errors so I'm aware that I didn't do that.

Reproducible demo

Link to Project: https://github.com/STLnick/ts-trial

Just clone, yarn or npm i and yarn start or npm start. Open VSCode and view App.tsx or Hello.tsx to see errors.

The only thing that I edited from the project given by create-react-app my-app --template typescript is adding a .eslintrc.json file and eslint dev-dependencies. I spent hours looking up this issue and trying things. Adding linting was the only one that actually changed the project structure at all.

You can absolutely look at my code link and it would be just the same as if you ran CRA with the TypeScript template.

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[chaurasiawadh]

I solved this using the following command.

npm uninstall -g create-react-app

npm cache clean --force

then

npx create-react-app project_name --template all

Thanks for this! Worked for me too.

[Bruk-sem]

guys you just need to save your file by .tsx file extension instead of ts and all your problems will disappear***