Repository: create-react-app
Issue: CRA TypeScript template "cannot find name <element>"
Labels: needs triage,issue: bug report

### 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](https://github.com/Microsoft/TypeScript-Handbook/blob/master/pages/tutorials/React.md) 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`

<img width="242" alt="Screen Shot 2020-10-13 at 7 53 30 AM" src="https://user-images.githubusercontent.com/28642281/95863133-71437a80-0d29-11eb-8f9d-48b667cb9e37.png">

`src/App.tsx`

<img width="547" alt="Screen Shot 2020-10-13 at 7 53 44 AM" src="https://user-images.githubusercontent.com/28642281/95863146-756f9800-0d29-11eb-894a-9052d19e6779.png">

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.