CODEWITHSUNDEEP
node.jsxcodereact-nativenpmyarnpkg
Stray
Stray

Reputation: 1

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

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:

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:

 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.

Upvotes: 0

Views: 8774

Answers (5)

Dennis Mbugua
Dennis Mbugua

Reputation: 49

This one worked for me

First, check your current styled components

npm list styled-components

Remove existing versions

npm uninstall styled-components

Then update it

npm install styled-components@^6.1

Ensure your package.json has the correct version

{
  "dependencies": {
    "styled-components": "^6.1",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "sanity": "^3.0.0"
  }
}

Upvotes: 0

amjadmak
amjadmak

Reputation: 11

Nothing worked for me except the following:

  1. Delete node-modules folder
  2. add the following two lines to package.json:

"styled-components": "^5.1.1"

"react-dom": "[YOUR CURRENT REACT VERSION]"

  1. run npm i

Upvotes: 1

Vini Fraga
Vini Fraga

Reputation: 126

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.

Upvotes: 8

Bharat Chavhan
Bharat Chavhan

Reputation: 31

issues:

npm ERR! Cannot read properties of null (reading 'edgesOut')

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\bhara\AppData\Local\npm-cache\_logs\2023-05-14T14_02_09_938Z-debug-0.log
PS C:\Users\bhara\Desktop\Grogu\rasoi> npm install styled-components@6
npm ERR! code ETARGET
npm ERR! notarget No matching version found for styled-components@6.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\bhara\AppData\Local\npm-cache\_logs\2023-05-14T14_03_31_853Z-debug-0.log
PS C:\Users\bhara\Desktop\Grogu\rasoi> npm install styled-components@6
npm ERR! code ETARGET
npm ERR! notarget No matching version found for styled-components@6.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

npm ERR! A complete log of this run can be found in:

Solution that worked for me:

npm install styled-components@5

Upvotes: 3

Bek Roz
Bek Roz

Reputation: 857

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

Upvotes: 1

Related Questions