Typescript parsing error when EXTEND_ESLINT=true in create-react-app

Question

We currently have a create-react-app project that is undergoing an incremental migration from Flow to Typescript. This meant disabling some undesirable ESLint rules. In order to customise ESLint, I've added EXTEND_ESLINT=true to the .env file.

Before adding this setting, my Typescript code compiles fine. Afterwards, I get parsing errors on certain (but not all) Typescript grammars.

// Type guards
export function f0<T>(x: T|undefined): x is T { ...

// Constrained generics
export function f1<T extends number>(x: T) { ...

// Type assertions
... return x as T

There may be other unrecognised syntaxes I haven't found yet.

So far

I haven't found any similar problems or bug reports. I understand some Typescript features are not available in the current CRA version, such as const enum, but I haven't found any mention of the features listed above. I am also pretty sure my Typescript and ESLint versions are compatible with typescript-eslint.
I've tried many different .eslintrc combinations. I've left a few of the most promising in the .eslintrc.js file in the attached repository. The current setup is the one recommended by create-react-app, where Typescript linting is set up in the overrides section.
The ESLint Typescript configuration was set up following instructions from the typescript-eslint monorepo, in particular, typescript-eslint/parser and typescript-eslint/eslint-plugin

Solutions

Ejecting is not an option. If no other solution can be found, I would rather just do the Flow -> TS conversion in one go.
We currently extend our CRA configuration with customize-cra. Solutions involving this are welcome.
I enjoy the flexibility the .eslintrc gives me but I am happy to do away with it, provided I can still set lint rules.

Notes

I've included customize-cra in the demo repo to accurately reflect our project, but the problem persists without customize-cra, indicating that it is likely not the culprit.
See src/components/TestComponent/fn.ts for examples of the problem syntax.
My current hypothesis is that there's some setup in the CRA ESLint config that doesn't get carried over when EXTEND_ESLINT=true.

Updates

I've opened an issue at create-react-app
Partial workaround listed on the issue. Still not ideal.

think-serious · Accepted Answer · 2020-03-21 01:43:38Z

3

UPDATE: Update react-scripts to latest version at least 3.4.1. It's fixed.

For pre 3.4.1 versions of react-scripts,

Open node_modules/react-scripts/config/webpack.config.js

Replace code block from line 365 with this code.

  if (process.env.EXTEND_ESLINT === 'true') {
    return undefined
  } else {
    return {
      extends: [require.resolve('eslint-config-react-app')],
    };
  }
})(),
useEslintrc: process.env.EXTEND_ESLINT === 'true',

Now if you start your app by yarn or npm, you will see it is fixed.

The fix is originally introduced here

https://github.com/facebook/create-react-app/issues/7776#issuecomment-567587642

Run npx patch-package react-scripts to make a patch for it. And add "postinstall": "patch-package" to your package.json scripts section.

The patch will be automatically applied after npm install

edited Mar 21, 2020 at 1:43

answered Dec 30, 2019 at 15:55

think-serious

1,3392 gold badges14 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

whitestripe · Accepted Answer · 2019-11-13 23:51:22Z

0

For anyone else encountering this issue, there is an open issue at CRA which seems to be the cause.

answered Nov 13, 2019 at 23:51

whitestripe

4193 silver badges8 bronze badges

Collectives™ on Stack Overflow

Typescript parsing error when EXTEND_ESLINT=true in create-react-app

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related