#9791·create-react-app

Cannot compile TypeScript app created with CRA because of parsing errors

Author: tx46Created Oct 13, 2020Updated Sep 5, 2026

Labelsneeds triageissue: bug report

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:

Googling (finding semi-similar issues reported, but no answers or solutions)
Removing node_modules and doing npm install and npm ci
Removing package-lock.json and npm install and npm ci
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

npx create-react-app my-app --typescript
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;

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

bash

λ npm run build

> [email protected] 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! [email protected] build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 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

Source: react/create-react-app

View original on GitHub View discussion on GitHub