React Native: `styled-components/native` cannot be resolved by bundler under yarn workspace

Question

I recently moved to monorepo using yarn workspace with an existing react native project. Now, I have one react native project called "timeylo" under "packages/", whose react-native dependencies are not hoisted by yarn.

The error I got when bundling JavaScript:

error: bundling failed: Error: Unable to resolve module `styled-components/native` from `/Users/sunhe/Documents/Projects/issue/issue-repo/packages/timeylo/src/app.tsx`: Module `styled-components/native` does not exist in the Haste module map or in these directories:
  /Users/sunhe/Documents/Projects/issue/issue-repo/node_modules/styled-components

I have a repo for replaying the error: https://github.com/bidiu/issue-repo

All you need to do is:

• yarn at root,
• cd packages/timeylo
• yarn start to start the bundler
• In another terminal, yarn react-native run-ios (or use Xcode).

You should see the error under the bundler session.

More info of react-native info if you need :)

System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
    Memory: 207.65 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.15.3 - /var/folders/dl/9r8h7nj57ps6h4t4jpwd_1kh0000gn/T/yarn--1581841642552-0.27345581007574116/node
    Yarn: 1.21.1 - /var/folders/dl/9r8h7nj57ps6h4t4jpwd_1kh0000gn/T/yarn--1581841642552-0.27345581007574116/yarn
    npm: 6.10.3 - ~/.nvm/versions/node/v10.15.3/bin/npm
    Watchman: 4.9.0 - /opt/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5791312
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.8.6 => 16.8.6 
    react-native: 0.60.5 => 0.60.5 
  npmGlobalPackages:
    react-native-cli: 2.0.1

Thank you very much!!

Yasukoyataghan

Try npm i styled-components --save – Refreshing

Answer 1

 npm install styled-components --save

Try above one, it will work

Meitner

Answer 2

For Yarn :

yarn add styled-components

For npm :

npm install --save styled-components

Duda

Be careful to stick with one package manager for your project or repo. Mixing yarn and npm can cause path resolution issues for installed packages and result in errors similar to what you're experiencing. For example, I installed several packages with npm, but used yarn install when installing the modules to get the project working, I then had to remove yarn.lock and node_modules and then run npm install to fix module resolution errors I had that were similar to what you're experiencing. – Bugger

You are missing "s" at the end of "styled-components" – Guiscard

Answer 3

I had the same issue opening a new terminal and trying again solved it npm install --save styled-components should fix it too.

Whitethorn

Answer 4

answer for projects that use typescript

tsconfig.json

{
  "extends": "@tsconfig/react-native/tsconfig.json",
  "compilerOptions": {
    "isolatedModules": false,
    "skipLibCheck": true,
-->    "types": ["jest", "node", "@types/styled-components-react-native"]
  }
}

yarn add styled-components yarn add -D @types/styled-components-react-native

Marje

Answer 5

Here is what worked for me.

For Yarn

yarn add [email protected]

For npm

npm install --save [email protected]

Loritalorn

Answer 6

Install @types/styled-components for ReactJS OR @types/styled-components-react-native

npm i @types/styled-components

npm i @types/styled-components-react-native

Great!!!

Mockup