rebassjs / rebass

:atom_symbol: React primitive UI components built with styled-system.
https://rebassjs.org
MIT License
7.94k stars 656 forks source link

Yarn V2 Compatibility #933

Open chrsep opened 4 years ago

chrsep commented 4 years ago

When I build a project that uses rebass and @rebass/forms using yarn V2, I got the following errors:

reflexbox tried to access react (a peer dependency) but it isn't provided by its ancestors; this makes the require call ambiguous and unsound.
@rebass/forms tried to access @styled-system/should-forward-prop, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

The first one is caused by rebass and @rebass/forms having a dependency on reflexbox, which have react as its peer dependency, yet it doesn't provide it. Adding react to @rebass/forms and rebass as peer dependency should fix this.

The second one is caused by @rebass/forms importing @styled-system/should-forward-prop without it having an explicit dependency on it in package.json. Adding @styled-system/should-forward-prop should fix this.

My current workaround is to add the following into the project-level .yarnrc.yml:

packageExtensions:
  "rebass@*":
    peerDependencies:
      react: "^16.8.6"
  "@rebass/forms@*":
    dependencies:
      "@styled-system/should-forward-prop": "*"
    peerDependencies:
      react: "^16.8.6"
2075 commented 3 years ago

i get something like this:

ready - started server on http://localhost:8020
info  - Using external babel configuration from /Users/xxx/dev/xxx/xxx-stack/apps/zero.io/.babelrc
error - ../../.yarn/cache/rebass-npm-4.0.7-7a8e820861-5dbd569aa9.zip/node_modules/rebass/styled-components/index.js:20:0
Module not found: rebass tried to access react, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

Required package: react (via "react")
Required by: rebass@npm:4.0.7 (via /Users/xxx/dev/xxx/xxx-stack/.yarn/cache/rebass-npm-4.0.7-7a8e820861-5dbd569aa9.zip/node_modules/rebass/styled-components/index.js)

null

i guess this is related?