[Bug] - Styled components - Module not found: A package is trying to access a peer dependency that should be provided by its direct ancestor but isn't

[zerocity]

Bug description

It is an CRA with only styled-components as dependencies see below for repo.

Failed to compile.
./.yarn/$$virtual/styled-components-virtual-3b06c0951a/0/cache/styled-components-npm-5.0.1-87fcb612e6-2.zip/node_modules/styled-components/dist/styled-components.browser.esm.js
Module not found: A package is trying to access a peer dependency that should be provided by its direct ancestor but isn't

yarn dlx @yarnpkg/doctor
 YN0000: ┌ Resolution step
➤ YN0000: └ Completed in 9.79s
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed in 0.15s
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed in 0.4s
➤ YN0000: Done in 10.35s

➤ YN0000: Found 1 package(s) to process
➤ YN0000: For a grand total of 5 file(s) to validate

➤ YN0000: ┌ /home/zerocity/projects/styled-components-yarn-2/package.json
➤ YN0000: │ /home/zerocity/projects/styled-components-yarn-2/package.json:8:36: Unmet transitive peer dependency on @testing-library/dom@>=5, via @testing-library/user-event@^7.1.2
➤ YN0000: │ /home/zerocity/projects/styled-components-yarn-2/package.json:12:26: Unmet transitive peer dependency on react-is@>= 16.8.0, via styled-components@^5.0.1
➤ YN0000: └ Completed in 0.74s

➤ YN0000: Failed with errors in 0.74s

What is the current behavior?
Failed to compile.

What is the expected behavior?
dont "crash"

Steps to Reproduce

git clone https://github.com/zerocity/styled-components-yarn-2
yarn start

sorry i dont know how i would do this with sherlock

Environment

• Node Version: 12.14.0
• Yarn v2 Version: 2.0.0-rc.29
• OS and version: Linux jerico 5.3.0-29-generic [Feature] Expose extra information in plugin-constraints #31-Ubuntu SMP Fri Jan 17 17:27:26 UTC 2020 x86_64 x86_64 x86_64 GNU/Linux

[merceyz]

styled-components has a peerDependency on react-is but you're not providing it.
https://unpkg.com/browse/[email protected]/package.json

[zerocity]

i fixed the peer dependecies , the same error

➤ YN0000: ┌ Resolution step
➤ YN0000: └ Completed in 1.99s
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed in 0.13s
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed in 0.36s
➤ YN0000: Done in 2.5s

➤ YN0000: Found 1 package(s) to process
➤ YN0000: For a grand total of 5 file(s) to validate

➤ YN0000: ┌ /home/zerocity/projects/styled-components-yarn-2/package.json
➤ YN0000: └ Completed in 0.67s

➤ YN0000: Done in 0.67s

when i start the application.I get the following error.

Failed to compile.
./.yarn/$$virtual/styled-components-virtual-3b06c0951a/0/cache/styled-components-npm-5.0.1-87fcb612e6-2.zip/node_modules/styled-components/dist/styled-components.browser.esm.js
Module not found: A package is trying to access a peer dependency that should be provided by its direct ancestor but isn't

[merceyz]

You need to set it as a dependency (yarn add react-is)

[zerocity]

Ok this was working.

To fix this for others "react-is" should be added as peerDependecies in styled-components ?

[merceyz]

It already is, you were missing it as a dependency.

[ibqn]

@merceyz I do not understand it, why should react-is be added as dependency of my project, according to your suggestion, if I do not use it directly anywhere in my code, however I use styled-components?

Can you please elaborate your point?

[merceyz]

styled-components has a peer dependency on react-is so its parent (probably your project) needs to provide it

https://yarnpkg.com/configuration/manifest/#peerDependencies

[mattp0123]

styled-components/styled-components#3082 (comment)
@ibqn Maybe this will help?

[sibstark]

packageExtensions:
  styled-components@*:
    dependencies:
      react-is: "*"

Hello! I tried to fix it with adding this to my .yarnrc.yml but it did not help
Adding react-is to package.json solved problem but I think that is wrong way to fix that issue.

[mattp0123]

packageExtensions:
  styled-components@*:
    dependencies:
      react-is: "*"

Hello! I tried to fix it with adding this to my .yarnrc.yml but it did not help
Adding react-is to package.json solved problem but I think that is wrong way to fix that issue.

@sibstark Have you ran yarn after adding these lines?

[sibstark]

@sibstark Have you ran yarn after adding these lines?

which command? yarn install?

[wjureczka]

Any updates on this issue? Locally everything works, but when I run the same code at Gitlab CI, an error appears.

My error log looks like this:

ERROR in ../../.yarn/__virtual__/@react-spring-animated-virtual-0e84b2fe99/0/cache/@react-spring-animated-npm-9.4.4-2a6df4a67e-9f353dcece.zip/node_modules/@react-spring/animated/dist/react-spring-animated.esm.js 2:0-31
Module not found: Error: @react-spring/animated tried to access react (a peer dependency) but it isn't provided by its ancestors; this makes the require call ambiguous and unsound.
Required package: react
Required by: @react-spring/animated@virtual:86d15fd9bdc122744ba1d7baad995e18b66c8e332d02ec28193e06229fadc63a137d8d48b8d405183c346d3d28a40c997a09b608edb8cba8731c355737b1a935#npm:9.4.4 (via /builds/millionpugs/web-frontend/.yarn/__virtual__/@react-spring-animated-virtual-0e84b2fe99/0/cache/@react-spring-animated-npm-9.4.4-2a6df4a67e-9f353dcece.zip/node_modules/@react-spring/animated/dist/)
Ancestor breaking the chain: react-spring@npm:9.4.1
 @ ../../.yarn/__virtual__/@react-spring-web-virtual-644e1171e5/0/cache/@react-spring-web-npm-9.4.4-c6d85ae78d-7ebe8b7b0e.zip/node_modules/@react-spring/web/dist/react-spring-web.esm.js 5:0-68 140:28-42 229:13-23
 @ ../../.yarn/cache/react-spring-npm-9.4.1-f399769db0-96ed3b07b6.zip/node_modules/react-spring/dist/react-spring.esm.js 1:0-34 1:0-34
 @ ./src/components/Modal/Modal.styled.ts 5:0-40 9:33-45 20:41-53
 @ ./src/components/Modal/index.ts 1:0-41 3:25-31
 @ ./src/components/index.ts 23:0-24 23:0-24
 @ ./src/index.ts 7:0-29 7:0-29
ERROR in ../../.yarn/__virtual__/@react-spring-core-virtual-86d15fd9bd/0/cache/@react-spring-core-npm-9.4.4-a0ac622cc7-d73d774d61.zip/node_modules/@react-spring/core/dist/react-spring-core.esm.js 3:0-31
Module not found: Error: @react-spring/core tried to access react (a peer dependency) but it isn't provided by its ancestors; this makes the require call ambiguous and unsound.
Required package: react
Required by: @react-spring/core@virtual:f399769db08497b8d6091b56c8720945493e71ab8cd38ccfb257c2383a9d4caf262b45d3f862f242ddbf181a32908eb8ddd00ad6fb54795b351908318015635d#npm:9.4.4 (via /builds/millionpugs/web-frontend/.yarn/__virtual__/@react-spring-core-virtual-86d15fd9bd/0/cache/@react-spring-core-npm-9.4.4-a0ac622cc7-d73d774d61.zip/node_modules/@react-spring/core/dist/)
Ancestor breaking the chain: react-spring@npm:9.4.1
 @ ../../.yarn/__virtual__/@react-spring-web-virtual-644e1171e5/0/cache/@react-spring-web-npm-9.4.4-c6d85ae78d-7ebe8b7b0e.zip/node_modules/@react-spring/web/dist/react-spring-web.esm.js 1:0-45 2:0-35 2:0-35 224:0-14
 @ ../../.yarn/cache/react-spring-npm-9.4.1-f399769db0-96ed3b07b6.zip/node_modules/react-spring/dist/react-spring.esm.js 1:0-34 1:0-34
 @ ./src/components/Modal/Modal.styled.ts 5:0-40 9:33-45 20:41-53
 @ ./src/components/Modal/index.ts 1:0-41 3:25-31
 @ ./src/components/index.ts 23:0-24 23:0-24
 @ ./src/index.ts 7:0-29 7:0-29

.yarnrc.yml:

enableGlobalCache: true

nodeLinker: "node-modules"

pnpMode: loose
pnpFallbackMode: all

plugins:
  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
    spec: "@yarnpkg/plugin-workspace-tools"

[merceyz]

Any updates on this issue?

No, the solution to this issue was specified in #966 (comment).

Based on the error and looking at the package in question, the issue in your case is that react-spring is missing a peer dependency on react and react-dom.
Add the following to .yarnrc.yml and run yarn install to fix it.

packageExtensions:
  'react-spring@*':
    peerDependencies:
      'react': '*'
      'react-dom': '*'

However the provided .yarnrc.yml can't produce the error you're showcasing so I doubt that is correct.

---

Since this issue was resolved over two years ago I'll lock this.