Default linter and/or linting configuration cannot parse various TypeScript features (e.g. modifiers like readonly)

Is this a bug report?

Yes

Did you try recovering your dependencies?

The issue occurs on a freshly created application.

Which terms did you search for in User Guide?

Linting, Readonly, TypeScript

Environment

Environment Info:

  System:
    OS: macOS Sierra 10.12.6
    CPU: x64 Intel(R) Core(TM) i7-3740QM CPU @ 2.70GHz
  Binaries:
    Node: 10.15.1 - ~/.nodenv/versions/10.15.1/bin/node
    npm: 6.7.0 - ~/.nodenv/versions/10.15.1/bin/npm
  Browsers:
    Chrome: 72.0.3626.96
    Firefox: 64.0.2
    Safari: 12.0.3
  npmPackages:
    react: ^16.8.1 => 16.8.1 
    react-dom: ^16.8.1 => 16.8.1 
    react-scripts: 2.1.5 => 2.1.5 
  npmGlobalPackages:
    create-react-app: 2.1.5

Steps to Reproduce

1. Generate an app with the typescript option:

   create-react-app my-app --typescript
   

2. Add TypeScript code with the readonly modifier, for example in src/App.tsx:

   interface Test {
     readonly foo: string
   }
   

3. Observe that eslint cannot parse the code, as indicated by the editor if integrated with eslint, or by running the following command:

   $> ./node_modules/eslint/bin/eslint.js src/App.tsx
   
   /path/to/my-app/src/App.tsx
     6:12  error  Parsing error: Unexpected token, expected ":"
   
     4 | 
     5 | interface Test {
   > 6 |   readonly foo: string;
       |            ^
     7 | }
     8 | 
     9 | class App extends Component {
   
   ✖ 1 problem (1 error, 0 warnings)
   

Expected Behavior

The linter with its default configuration should be able to parse this interface.

Actual Behavior

The linter fails to parse the interface with the error:

error  Parsing error: Unexpected token, expected ":"

Removing the readonly modified removes the parsing error.

Reproducible Demo

This repository demonstrates the issue with a simple commit.

Run the following command to reproduce:

git clone https://github.com/AlphaHydrae/create-react-app-typescript-readonly-bug.git && \
  cd create-react-app-typescript-readonly-bug && \
  npm ci && \
  ./node_modules/eslint/bin/eslint.js src/App.tsx

[foffer]

Is there any update on this, I’m seeing the same issue using react-scripts 4.0.1

[JustinTRoss]

Wow. That is weird. I was able to resolve the issues by defining my own eslint config with typescript parser and plugin.