Repository: create-react-app
Issue: Cannot compile TypeScript app created with CRA because of parsing errors
Labels: needs triage,issue: bug report

<!--
    Please note that your issue will be fixed much faster if you spend about
    half an hour preparing it, including the exact reproduction steps and a demo.

    If you're in a hurry or don't feel confident, it's fine to report bugs with
    less details, but this makes it less likely they'll get fixed soon.

    In either case, please use this template and fill in as many fields below as you can.

    Note that we don't provide help for webpack questions after ejecting.
    You can find webpack docs at https://webpack.js.org/.
-->

### Describe the bug

`create-react-app` seems to have issues compiling valid TypeScript code.

### Did you try recovering your dependencies?

Yes, in a number of ways. I cannot manage to fix this, despite spending hours on researching it.

I've tried:

1. Googling (finding semi-similar issues reported, but no answers or solutions)
2. Removing `node_modules` and doing `npm install` and `npm ci`
3. Removing `package-lock.json` and `npm install` and `npm ci`
4. Reconstructing the entire `package.json` file by doing `npm install <package-name>` for every single dependency.

### Which terms did you search for in User Guide?


parsing error, unexpected token, syntax error, create-react-app, private access modifier, failed to compile, typescript syntax error and tons of permutations of these.

### Environment

- Windows 10 x64
- node v12.19.0
- npm 6.14.8

### Steps to reproduce

1. `npx create-react-app my-app --typescript`
2. Edit `App.tsx` and add the following code under the import statements and above the `function App() ...` line:
```typescript
class Foo {
  private bar: number;

  constructor() {
    this.bar = 1;
  }
}
```

Full content of `App.tsx`:
```typescript
import React from 'react';
import logo from './logo.svg';
import './App.css';

class Foo {
  private bar: number;

  constructor() {
    this.bar = 1;
  }
}

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
```

3. Run `npm run build`

NOTE: There are other syntaxes which do not work, such as `readonly` and more.

### Expected behavior

The app is compiled successfully.

### Actual behavior

```
λ npm run build

> my-app@0.1.0 build C:\Users\...\my-app
> react-scripts build

Creating an optimized production build...
Failed to compile.

C:/Users/.../my-app/src/App.tsx
  Line 6:11:  Parsing error: Unexpected token

  4 |
  5 | class Foo {
> 6 |   private bar: number;
    |           ^
  7 |
  8 |   constructor() {
  9 |     this.bar = 1;


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-app@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my-app@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\...\npm-cache\_logs\2020-10-13T05_11_20_782Z-debug.log
```