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

Generate an app with the typescript option:
```
create-react-app my-app --typescript
```
Add TypeScript code with the readonly modifier, for example in src/App.tsx:
```
interface Test {
  readonly foo: string
}
```

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

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> {
}

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:
https://github.com/facebook/create-react-app/blob/319cf9b9e1833a4b31209b9dea0d03e89b996d71/packages/eslint-config-react-app/index.js#L29
https://github.com/facebook/create-react-app/blob/319cf9b9e1833a4b31209b9dea0d03e89b996d71/packages/eslint-config-react-app/index.js#L41-L47

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

Add TypeScript linting support
Issue #5641
Pull #6513

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.

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:

Same for keyof.

Interesting! Here's our ESLint setup in webpack as of 2.1.8: https://github.com/facebook/create-react-app/blob/c17e25bf7f9dd60c49cd491535114beb5592ff81/packages/react-scripts/config/webpack.config.js#L307.

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.

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

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

Navigation Menu

Repository navigation

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

Is this a bug report?

Did you try recovering your dependencies?

Which terms did you search for in User Guide?

Environment

Steps to Reproduce

Expected Behavior

Actual Behavior

Reproducible Demo

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Is this a bug report?

Did you try recovering your dependencies?

Which terms did you search for in User Guide?

Environment

Steps to Reproduce

Expected Behavior

Actual Behavior

Reproducible Demo

Activity

AlphaHydrae commented on Feb 13, 2019

Nimelrian commented on Feb 15, 2019

sbusch commented on Feb 22, 2019

nsmithdev commented on Mar 11, 2019

ianschmitz commented on Mar 11, 2019

Nimelrian commented on Mar 11, 2019

JustinTRoss commented on Mar 31, 2019

ianschmitz commented on Apr 1, 2019

JustinTRoss commented on Apr 1, 2019

foffer commented on Jan 1, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions