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

[AlphaHydrae]

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

[AlphaHydrae]

I just stumbled over another similar problem. The following valid TypeScript also causes the linter's parsing to fail:

function foo<T = any>() {
}

Although this works fine:

interface Foo<T = any> {
}

[Nimelrian]

eslint also trips over this:

type Id<T> = {
    [Prop in keyof T]: T[Prop];
}

Parsing error: Unexpected token, expected "]"

   6 | 
   7 | type Id<T> = {
>  8 |     [Prop in keyof T]: T[Prop];
     |           ^
   9 | }
  10 | 
  11 | type S = Id<{foo: "bar"}>;

It seems like the babel-eslint parser configured in the config doesn't handle TypeScript. Here's the config from the eslint-config-react-app package:

create-react-app/packages/eslint-config-react-app/index.js

Line 29 in 319cf9b

parser: 'babel-eslint',

create-react-app/packages/eslint-config-react-app/index.js

Lines 41 to 47 in 319cf9b

	parserOptions: {
	ecmaVersion: 2018,
	sourceType: 'module',
	ecmaFeatures: {
	jsx: true,
	},
	},

[sbusch]

I have a similar (the same?) problem, see #6360. Tested with CRA 2.1.5 and current HEAD.

[nsmithdev]

Add TypeScript linting support
Issue #5641
Pull #6513

[ianschmitz]

ESLint is not currently running on .ts or .tsx files. Any errors you're seeing are from the TypeScript compiler type checking. If you're seeing errors today it's likely because it's not valid TypeScript.

[Nimelrian]

That's strange, because simply creating a new project with yarn create react-app test --typescript, adding an .eslintrc.json to the project root containing only { "extends": "react-app" } and using the ESLint plugin for VS Code shows this error for perfectly valid TS code:

[JustinTRoss]

Same for keyof.

[ianschmitz]

Interesting! Here's our ESLint setup in webpack as of 2.1.8:

create-react-app/packages/react-scripts/config/webpack.config.js

Line 307 in c17e25b

test: /\.(js|mjs|jsx)$/,

.

Not sure how it would be running on typescript files. May be worth trying our 3.0 alpha to see if it resolves your issue as it includes typescript ESLint support.

[JustinTRoss]

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

[foffer]

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