为什么 NPM 不能安装样式组件？如果我使用 Yarn 安装，为什么 Xcode 构建会失败？

Question

我正在尝试使用 React Native CLI 启动 React 应用程序（也尝试使用 Expo，分别使用 Yarn 启动和 NPM 启动）。

这是 NPM 尝试使用 npm 安装样式组件时出现的错误（见下文），我已尝试完成互联网提供的所有修复，例如：

• 删除节点模块和各种清理
• 安装新的
• 制作一个全新的项目
• 更新或重新安装 Node 之类的东西

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: styled-components@5.3.5
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   react@"17.0.2" from the root project
npm ERR!   peer react@">=16.0" from @react-native-community/masked-view@0.1.11
npm ERR!   node_modules/@react-native-community/masked-view
npm ERR!     @react-native-community/masked-view@"^0.1.11" from the root project
npm ERR!   18 more (@react-native-masked-view/masked-view, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react-dom@">= 16.8.0" from styled-components@5.3.5
npm ERR! node_modules/styled-components
npm ERR!   styled-components@"^5.3.5" from the root project
npm ERR!   peer styled-components@">= 2" from babel-plugin-styled-components@2.0.7
npm ERR!   node_modules/babel-plugin-styled-components
npm ERR!     babel-plugin-styled-components@">= 1.12.0" from styled-components@5.3.5
npm ERR! 
npm ERR! Conflicting peer dependency: react@18.1.0
npm ERR! node_modules/react
npm ERR!   peer react@"^18.1.0" from react-dom@18.1.0
npm ERR!   node_modules/react-dom
npm ERR!     peer react-dom@">= 16.8.0" from styled-components@5.3.5
npm ERR!     node_modules/styled-components
npm ERR!       styled-components@"^5.3.5" from the root project
npm ERR!       1 more (babel-plugin-styled-components)
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.
npm ERR! 
npm ERR! See /Users/nate/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/nate/.npm/_logs/2022-05-02T16_36_05_349Z-debug-0.log

因此，即使当我使用 Yarn 时，每次 Xcode 构建仍然失败（没有样式组件，根本没有问题），就像它在某种程度上破坏了我的构建一样，请参阅下面的错误示例。

我尝试过类似的事情：

• 清理缓存
• 重新安装 Pod
• 节点模块删除并重新安装

 Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

Answer 1

我在现有的 React Native 项目上也遇到了与您相同的问题，但在新项目上没有发生相同的错误。

仔细观察差异，我发现我现有的 RN 项目没有react-dom安装，只有react@17.0.2.

所以，我已经安装了react-dom，npm install react-dom@17.0.2现在我可以安装样式组件而不会出现此对等依​​赖错误。

发生这种情况的原因是因为styled-components使用"react-dom": ">= 16.8.0"作为peerDependency，并且它本身也react@"^18.1.0"作为peerDependency，所以它尝试安装react@18并且我们的项目正在使用react@17，导致依赖树上出现此错误。

因此，当我们react-dom@17在项目上手动安装时，它满足styled-componentspeerDependency并且还使用react@17已经在我们的项目中的。