解决 babel-preset-react-app 缺失依赖问题的教程

本文旨在解决在使用 `create-react-app` 项目中，`babel-preset-react-app` 因未声明 `@babel/plugin-proposal-private-property-in-object` 依赖而导致的构建错误。我们将提供两种解决方案：首先是直接安装缺失的提案插件，随后重点介绍并推荐使用已更新的转换插件 `@babel/plugin-transform-private-property-in-object`，并指导如何在项目中正确配置，以确保项目稳定运行。

理解 babel-preset-react-app 依赖缺失问题

在使用 create-react-app (CRA) 创建的 React 项目中，开发者有时会遇到 Babel 相关的错误，提示 babel-preset-react-app 导入了 @babel/plugin-proposal-private-property-in-object 包，但并未在其依赖中声明。尽管该包可能因其他原因已存在于 node_modules 文件夹中，但这种隐式依赖关系随时可能导致项目构建失败。此问题尤其突出，因为 create-react-app 项目本身及其核心依赖 babel-preset-react-app 已不再积极维护，导致这类依赖问题难以通过官方更新解决。

典型的错误信息如下：

One of your dependencies, babel-preset-react-app, is importing the
"@babel/plugin-proposal-private-property-in-object" package without
declaring it in its dependencies. This is currently working because
"@babel/plugin-proposal-private-property-in-object" is already in your
node_modules folder for unrelated reasons, but it may break at any time.

babel-preset-react-app is part of the create-react-app project, which is not maintained anymore. It is thus unlikely that this bug will
ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to
your devDependencies to work around this error. This will make this message
go away.

解决方案一：直接安装缺失的提案插件（历史方案）

针对上述错误，最直接的解决方案是手动将 babel-preset-react-app 所需的插件作为开发依赖添加到项目的 package.json 中。这确保了该插件在构建时始终可用，从而消除警告和潜在的运行时错误。

在项目根目录下执行以下命令：

npm install --save-dev @babel/plugin-proposal-private-property-in-object

此命令会将 @babel/plugin-proposal-private-property-in-object 安装到项目的 devDependencies 中。执行完毕后，package.json 文件中的 devDependencies 部分将包含此插件：

{
  "name": "keeper-app-part-1-starting",
  "version": "1.0.0",
  // ... 其他配置
  "devDependencies": {
    "@svgr/webpack": "^8.0.1",
    "react-scripts": "5.0.1",
    "typescript": "5.1.3",
    "@babel/plugin-proposal-private-property-in-object": "^7.x.x" // x.x.x 为安装时的具体版本
  },
  // ... 其他配置
}

完成安装后，重新运行 npm start 或 npm run build，之前的 Babel 错误信息应该会消失。

解决方案二：推荐的现代方法（处理插件废弃）

需要注意的是，@babel/plugin-proposal-private-property-in-object 包目前已被标记为废弃 (deprecated)。Babel 团队推荐使用更新、更稳定的转换插件。因此，对于新项目或在解决此问题时，强烈建议采用以下现代方法。

1. 安装更新的转换插件

使用 @babel/plugin-transform-private-property-in-object 替代废弃的提案插件。执行以下命令：

AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

22

查看详情

npm install --save-dev @babel/plugin-transform-private-property-in-object

此操作同样会将插件添加到 devDependencies。

2. 在配置中引用新插件

安装新插件后，可能需要确保项目中的 Babel 或 ESLint 配置能够正确引用它。虽然 create-react-app 默认隐藏了大部分 Babel 配置，但如果项目使用了自定义的 Babel 配置（例如通过 craco 或 react-app-rewired）或 ESLint 配置，则可能需要在其中明确指定此插件。

例如，如果项目使用了 .eslintrc 文件来扩展 Babel 配置，可以像下面这样引用：

{
  "extends": [
    "@babel/plugin-transform-private-property-in-object", // 引用新的转换插件
    "next/core-web-vitals" // 示例：其他 ESLint 扩展
  ],
  // ... 其他 ESLint 规则或配置
}

请注意，上述 .eslintrc 配置示例是针对特定场景（如 Next.js 项目）的，对于纯 create-react-app 项目，如果未进行 eject 操作或未引入自定义 Babel 配置，通常仅安装插件即可解决问题，因为 babel-preset-react-app 可能会自动识别并使用已安装的插件。如果错误仍然存在，则需要检查项目的 Babel 配置链。

集成与验证

在应用任一解决方案后，您可以通过以下步骤验证问题是否已解决：

1. 清除 node_modules 并重新安装： 为了确保所有依赖都按照 package.json 的最新状态安装，建议删除 node_modules 文件夹和 package-lock.json (或 yarn.lock)，然后重新运行 npm install。

   rm -rf node_modules
   rm package-lock.json # 或 rm yarn.lock
   npm install

   登录后复制
2. 检查依赖树： 使用 npm list 命令可以查看特定包在项目依赖树中的位置和状态。

   npm list @babel/plugin-transform-private-property-in-object
   # 或
   npm list @babel/plugin-proposal-private-property-in-object

   登录后复制

   如果插件已正确安装，您应该能看到其版本信息，且没有 invalid 警告。

3. 运行项目： 尝试执行 npm start 或 npm run build，确认不再出现 Babel 相关的依赖缺失错误。

注意事项与最佳实践

• create-react-app 的维护状态： 鉴于 create-react-app 已不再积极维护，建议在启动新项目时考虑使用其他现代构建工具，如 Vite、Next.js 或 Remix，它们提供了更快的开发体验和更灵活的配置。
• 依赖管理： 定期审查和更新项目的依赖项至关重要。使用 npm audit 可以发现潜在的安全漏洞和过时的包。
• overrides 字段： package.json 中的 overrides 字段用于强制指定依赖树中特定包的版本。虽然它在某些场景下可以解决依赖冲突，但对于像本文中这种因上游包未声明依赖而导致的问题，直接安装缺失的 devDependency 是更直接和推荐的解决方案。

总结

解决 babel-preset-react-app 依赖缺失问题的关键在于显式地将所需的 Babel 插件作为开发依赖安装到项目中。鉴于 @babel/plugin-proposal-private-property-in-object 已废弃，强烈推荐使用其替代品 @babel/plugin-transform-private-property-in-object。通过遵循本文提供的步骤，您可以有效解决此构建错误，确保 create-react-app 项目的稳定运行。同时，也建议开发者关注前端生态系统的发展，考虑采用更现代的构建工具和框架以获得更好的开发体验和长期维护性。

以上就是解决 babel-preset-react-app 缺失依赖问题的教程的详细内容，更多请关注php中文网其它相关文章！