创建反应应用程序 - 没有打字稿，得到错误：无法加载解析器'@typescript-eslint/parser'答案

【问题标题】：create react app - without typescript , got Error: Failed to load parser '@typescript-eslint/parser'创建反应应用程序 - 没有打字稿，得到错误：无法加载解析器'@typescript-eslint/parser'
【发布时间】：2020-05-24 20:07:27
【问题描述】：

我有 react-app 的示例安装，我得到了以下

Error: Failed to load parser '@typescript-eslint/parser' declared in '.eslintrc » eslint-config-react-app#overrides[0]': Cannot find module 'typescript'

运行后

 npm run lint -> eslint .

我在这个项目中不使用打字稿。我尝试从头开始安装它并再次获得它。还尝试从 vscode 插件中删除 tslint

【问题讨论】：

npm install @typescript-eslint/parser typescript
GH 问题在这里：github.com/facebook/create-react-app/issues/8936

标签： reactjs create-react-app eslint

【解决方案1】：

您可以将其添加到项目根目录下的 .eslintignore 文件中。

node_modules

create-react-app 团队也将发布带有该修复的新版本

https://github.com/facebook/create-react-app/pull/8376

【讨论】：

看起来确实是这样一个事实，eslint . 和当前处理 TypeScript 的 overrides 意味着 node_modules 也正在为 .ts/.tsx 文件进行检查。这个 PR 被提出来解决它：github.com/facebook/create-react-app/pull/9310 使用：``` "lint": "eslint --ignore-path .gitignore .", ``` 也可以，因为默认的 .gitignore 忽略 node_modules，并且意味着不必维护单独的 .eslintignore。

【解决方案2】：

我今天尝试创建新的 React 应用时遇到了同样的问题。

您可以尝试以下步骤：

确保将 nodejs 更新到最新版本
确保您的文件夹路径很短并且不包含空格
运行：npm install -g create-react-app
运行：npm i --save-dev typescript @typescript-eslint/parser
运行：create-react-app my-app

【讨论】：

在一个 craco 扩展项目中遇到了这个问题。 npm i --save-dev typescript @typescript-eslint/parser 为我修复了它。谢谢！

【解决方案3】：

Create React App 将 eslint 配置添加到 package.json，因此您只需在 package.json 中添加 eslintIgnore 和 node_modules。创建单独文件的更简洁的替代方法.eslintignore

  // package.json
  // ...
  "eslintConfig": {
    "extends": "react-app"
  },
  "eslintIgnore": [
    "node_modules",
    "build/*"
  ],

【讨论】：

【解决方案4】：

您的错误消息说 eslint 正在寻找 typescript 因为文件 .eslintrc 中的设置所以请尝试在该文件中查找 @typescript-eslint/parser 并将其删除。

【讨论】：

【解决方案5】：

我正在从项目中删除打字稿，但我遇到了同样的错误，因为我忘记了 src 文件夹下某处的打字稿定义...删除该文件解决了问题。

【讨论】：

【解决方案6】：

很可能，您的.eslintrc 中有这个：

extends: react-app

意思是the following rule is applied:

files: ['**/*.ts?(x)'], 
parser: '@typescript-eslint/parser',

这可能意味着您的根文件夹中有*.ts/*.tsx 文件。但也许是vscode-eslint。您是否尝试从终端运行yarn lint？

【讨论】：

【解决方案7】：

就我而言，我想要打字稿，但没有安装它。这个问题仍然帮助我弄清楚了我的问题，如下所述。

我在看一个YouTube video, React Typescript Tutorial，它解释了如何开始使用 typescript 和 react，视频说要运行：

npx create-react-app cra-ts --typescript

这不起作用（但我不知道）。一旦我创建了一个 hello.ts 文件，我就得到了 OP 描述的错误。

Error: Failed to load parser '@typescript-eslint/parser' declared in 'package.json » eslint-config-react-app#overrides[0]': Cannot find module 'typescript'

解决方法是使用以下命令：

npx create-react-app myappts --template typescript

这使用了 create-react-app@4.0.0 和 react-scripts@4.0.0。

专业提示：如果您新创建的 React App 没有名为 App.tsx 的文件，那么您实际上并没有正确创建它。

【讨论】：