Why does NPM not work with installing styled-components? Why does Xcode build fail if I install with Yarn?

Question

I am trying to start a React app with React Native CLI (also tried with Expo, both with a Yarn startup and NPM startup separately).

This is the error NPM trying to install styled-components with npm (see below) I have tried to do all fixes the internet has to offer such as:

• removing node modules and various cleans
• installing fresh
• making a whole new project
• updating or reinstalling things like Node

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
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/[email protected]
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 [email protected]
npm ERR! node_modules/styled-components
npm ERR!   styled-components@"^5.3.5" from the root project
npm ERR!   peer styled-components@">= 2" from [email protected]
npm ERR!   node_modules/babel-plugin-styled-components
npm ERR!     babel-plugin-styled-components@">= 1.12.0" from [email protected]
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/react
npm ERR!   peer react@"^18.1.0" from [email protected]
npm ERR!   node_modules/react-dom
npm ERR!     peer react-dom@">= 16.8.0" from [email protected]
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

So even when I use Yarn instead it still fails my Xcode build every time (without styled-components there are no problems at all) its like its corrupting my build some how, see example of error below.

I tried things like:

• cleaning caches
• reinstalling pods
• node modules delete and install again

 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

I'm also facing the same problem as you on an existing React Native project, but on a new one the same error did not occur.

Looking closely for the diferences, I've found out that my existing RN project did not have react-dom installed, only [email protected].

So, I've installed react-dom with npm install [email protected] and now I can install Styled Components without having this peer dependency error.

The reason it is happening is because styled-components uses "react-dom": ">= 16.8.0" as a peerDependency, and it itself has react@"^18.1.0" as a peerDependency, so it tries to install react@18 and our project is using react@17, causing this error on the dependency tree.

So, when we manually installs react-dom@17 on our project, it satisfies the styled-components peerDependency and also uses react@17, which is already on our project.

Hope it helps

Answer 2

Check it if you're importing from native folder inside the styled components.

import styled from 'styled-components/native'

And make sure all of your dependencies up-to-date.

Link to VS Code extension to see if your dependencies need upgrade: https://marketplace.visualstudio.com/items?itemName=codeandstuff.package-json-upgrade