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:

class Foo { private bar: number; constructor() { this.bar = 1; } }

Full content of App.tsx:

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