在普通的 create-react-app --template typescript 文件夹中安装 eslint 失败

Question

我正在尝试将 eslint 安装到从 TypeScript 模板创建的普通 create-react-app 文件夹中。

我运行了以下命令：

% npx create-react-app REDACTED --template typescript

Creating a new React app in REDACTED.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template-typescript...


added 1427 packages in 13s

231 packages are looking for funding
  run `npm fund` for details

Installing template dependencies using npm...

added 52 packages, and changed 2 packages in 3s

240 packages are looking for funding
  run `npm fund` for details

We detected TypeScript in your project (src/App.test.tsx) and created a tsconfig.json file for you.

Your tsconfig.json has been populated with default values.

Removing template package using npm...


removed 1 package, and audited 1479 packages in 2s

240 packages are looking for funding
  run `npm fund` for details

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Success! Created trip-quoter at REDACTED

太棒了，我现在有了一个来自 TypeScript 模板的普通 CRA 应用程序。

现在我尝试安装 eslint:

% npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: @typescript-eslint/[email protected]
npm ERR! node_modules/@typescript-eslint/eslint-plugin
npm ERR!   @typescript-eslint/eslint-plugin@"^5.5.0" from [email protected]
npm ERR!   node_modules/eslint-config-react-app
npm ERR!     eslint-config-react-app@"^7.0.1" from [email protected]
npm ERR!     node_modules/react-scripts
npm ERR!       react-scripts@"5.0.1" from the root project
npm ERR!   peerOptional @typescript-eslint/eslint-plugin@"^4.0.0 || ^5.0.0" from [email protected]
npm ERR!   node_modules/eslint-plugin-jest
npm ERR!     eslint-plugin-jest@"^25.3.0" from [email protected]
npm ERR!     node_modules/eslint-config-react-app
npm ERR!       eslint-config-react-app@"^7.0.1" from [email protected]
npm ERR!       node_modules/react-scripts
npm ERR!         react-scripts@"5.0.1" from the root project
npm ERR!   1 more (the root project)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! dev @typescript-eslint/eslint-plugin@"*" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: @typescript-eslint/[email protected]
npm ERR! node_modules/@typescript-eslint/parser
npm ERR!   peer @typescript-eslint/parser@"^6.0.0 || ^6.0.0-alpha" from @typescript-eslint/[email protected]
npm ERR!   node_modules/@typescript-eslint/eslint-plugin
npm ERR!     dev @typescript-eslint/eslint-plugin@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

看起来像是某种疯狂的依赖。有谁知道如何解决这个问题吗？

Answer 1

遗憾的是，这是

create-typescript-app

中围绕对等依赖不匹配的几个未解决的错误之一：#13259、#13080、#13071。

create-react-app

没有像以前那样积极维护（#13289，#13393），所以这些问题不太可能很快得到解决。 😔

要在不更改太多代码的情况下解决此问题，您可以按照消息中建议的步骤使用

npm install --force

或

npm install --legacy-peer-deps

。有关更多详细信息，请参阅 npm：何时使用 `--force` 和 `--legacy-peer-deps`。

或者，您可以

npm run eject

将之前被

create-react-app

的

react-scripts

隐藏的所有依赖项、脚本、设置等直接放入您的

package.json

中。这将允许您手动将软件包升级到较新的版本，以满足任何版本不匹配的情况。但请注意 - 通常这可能会导致大量工作！

---

考虑更多元：鉴于

create-react-app

不再被积极维护，您可能会考虑切换到另一个元 React 框架。 https://react.dev 的主页提到： 要使用 React 构建整个应用程序，我们推荐使用全栈 React 框架，例如 Next.js 或 Remix。 Astro 也是一个受欢迎的选择。

如果您真的想尽可能接近

create-react-app

（即不想要全栈应用程序或静态网站），Vite是当今一个不错的流行替代方案。