[英]Typescript parsing error when EXTEND_ESLINT=true in create-react-app
Stripped down demonstration - GitHub精简演示 - GitHub
We currently have a create-react-app project that is undergoing an incremental migration from Flow to Typescript.我们目前有一个 create-react-app 项目,该项目正在进行从 Flow 到 Typescript 的增量迁移。 This meant disabling some undesirable ESLint rules.
这意味着禁用一些不受欢迎的 ESLint 规则。 In order to customise ESLint, I've added
EXTEND_ESLINT=true
to the .env
file.为了自定义 ESLint,我在
.env
文件中添加了EXTEND_ESLINT=true
。
Before adding this setting, my Typescript code compiles fine.在添加此设置之前,我的 Typescript 代码编译良好。 Afterwards, I get parsing errors on certain (but not all) Typescript grammars.
之后,我在某些(但不是全部)Typescript 语法上遇到解析错误。
// 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.我了解某些 Typescript 功能在当前 CRA 版本中不可用,例如
const enum
,但我没有发现任何提及上面列出的功能。 I am also pretty sure my Typescript and ESLint versions are compatible with typescript-eslint
.我也很确定我的Typescript 和 ESLint 版本与 typescript
typescript-eslint
兼容。
I've tried many different .eslintrc
combinations.我尝试了许多不同
.eslintrc
组合。 I've left a few of the most promising in the .eslintrc.js
file in the attached repository.我在附加存储库的
.eslintrc.js
文件中留下了一些最有前途的。 The current setup is the one recommended by create-react-app , where Typescript linting is set up in the overrides
section.当前设置是create-react-app 推荐的设置,其中 Typescript linting 设置在
overrides
部分。
The ESLint Typescript configuration was set up following instructions from the typescript-eslint
monorepo , in particular, typescript-eslint/parser
and typescript-eslint/eslint-plugin
ESLint Typescript 配置是按照typescript
typescript-eslint
monorepo的说明设置的,特别是typescript-eslint/parser
和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.
如果找不到其他解决方案,我宁愿在一个 go 中进行 Flow -> TS 转换。
We currently extend our CRA configuration with customize-cra .我们目前使用customize-cra扩展我们的 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.我喜欢
.eslintrc
给我的灵活性,但我很乐意取消它,前提是我仍然可以设置 lint 规则。
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.我在演示 repo 中包含了
customize-cra
以准确反映我们的项目,但是没有customize-cra
问题仍然存在,这表明它可能不是罪魁祸首。
See src/components/TestComponent/fn.ts
for examples of the problem syntax.有关问题语法的示例,请参见
src/components/TestComponent/fn.ts
。
My current hypothesis is that there's some setup in the CRA ESLint config that doesn't get carried over when EXTEND_ESLINT=true
.我目前的假设是 CRA ESLint 配置中有一些设置在
EXTEND_ESLINT=true
时不会被继承。
Updates更新
UPDATE: Update react-scripts to latest version at least 3.4.1.更新:将 react-scripts 更新到至少 3.4.1 的最新版本。 It's fixed.
它是固定的。
For pre 3.4.1 versions of react-scripts,对于 3.4.1 之前的 react-scripts 版本,
Open node_modules/react-scripts/config/webpack.config.js
打开
node_modules/react-scripts/config/webpack.config.js
Replace code block from line 365 with this code.用此代码替换第 365 行的代码块。
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.现在,如果您通过 yarn 或 npm 启动您的应用程序,您将看到它已修复。
The fix is originally introduced here该修复程序最初在此处介绍
https://github.com/facebook/create-react-app/issues/7776#issuecomment-567587642 https://github.com/facebook/create-react-app/issues/7776#issuecomment-567587642
Run npx patch-package react-scripts
to make a patch for it.运行
npx patch-package react-scripts
为其制作补丁。 And add "postinstall": "patch-package"
to your package.json scripts section.并将
"postinstall": "patch-package"
添加到 package.json 脚本部分。
The patch will be automatically applied after npm install
npm install
后会自动应用补丁
For anyone else encountering this issue, there is an open issue at CRA which seems to be the cause.对于遇到此问题的其他人,CRA 有一个未解决的问题,这似乎是原因。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.