Yarn 2 (Plug n' Play) exposes dependency inconsistencies

Yarn 2 (in default Plug n’ Play mode, not using node_modules) is much stricter around package dependencies.

Trying to use chakra in such an environment causes the following sorts of errors:

Module not found: Error: @chakra-ui/number-input tried to access @chakra-ui/hooks, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

Expected Behavior

Module not found errors should not occur when building projects using Chakra in a Yarn 2 Plug n’ Play environment.

Link to minimal reproduction https://github.com/beforan/chrakra-ui-v1-yarn2

Sorry it’s not super minimal (as a repo) but I think the environment is important, and useful to showcase the issue and fix.

It’s a brand new CRA app, with all the starter stuff removed and chakra 1.0.0-rc.0 added, and that’s all. It also has storybook.

Steps to Reproduce

1. Have yarn globally installed (npm i -g yarn is recommended by yarn2’s docs, but i believe any yarn install is fine)
   • it will run the repo’s local yarn 2 binary
2. Run yarn to install dependencies
3. Run any of the following to see the errors:
   • yarn start
   • yarn build
   • yarn storybook

storybook is useful here as it throws all the errors at once; start and build seem to do it one by one. Some difference in how storybook and react-scripts invoke webpack, i guess.

This repo also showcases the current workaround (as described here):

1. Add packageExtensions to .yarnrc.yml to tell yarn about the missing dependencies.
   • I have done this in this repo, but they are commented out. this should highlight which dependencies need adding.

It also shows some peer dependencies which are installed in the local project, so I’m not sure of the cause of that, but it may warrant investigation. These are also noted in the .yarnrc.yml

Suggested solution(s)

Add the missing dependencies to the relevant packages:

"@chakra-ui/css-reset@1.0.0-rc.0":
  dependencies:
    "@emotion/core": "^10.0.28"
"@chakra-ui/core@1.0.0-rc.0":
  dependencies:
    "@chakra-ui/transition": "1.0.0-rc.0"
"@chakra-ui/drawer@1.0.0-rc.0":
  dependencies:
    "@chakra-ui/utils": "1.0.0-rc.0"
"@chakra-ui/number-input@1.0.0-rc.0":
  dependencies:
     "@chakra-ui/hooks": "1.0.0-rc.0"

Desktop (please complete the following information):

• OS: [e.g. iOS] Windows 10 2004
• Browser [e.g. chrome, safari] chrome, edge
• Version [e.g. 22] of browser? 84

Additional context I came across it playing with Yarn2.

It occurs to me that the environments I’ve encountered that show the errors are webpack based (CRA, storybook), though it is definitely Yarn’s PNP environment, not webpack itself that’s responsible, as per Yarn2’s documentation, so I don’t think that’s of note.

[Poolshark]

I also still have the same issue as @Pagebakers with Yarn 3… Pretty much the entire dependency tree is not getting found!

Any updates on this issue? I don’t want to fix the entire dependency tree for Chakra inside the yarnrc.yml…

[Pagebakers]

Having similar issues with yarn3

➤ YN0002: │ @chakra-ui/accordion@npm:1.4.2 [0f71e] doesn't provide framer-motion (p9ce2f), requested by @chakra-ui/transition
➤ YN0002: │ @chakra-ui/accordion@npm:1.4.2 [863e7] doesn't provide framer-motion (pf937f), requested by @chakra-ui/transition
➤ YN0002: │ @chakra-ui/anatomy@npm:1.2.1 doesn't provide @chakra-ui/system (p2ef3e), requested by @chakra-ui/theme-tools
➤ YN0002: │ @chakra-ui/props-docs@npm:1.0.40 doesn't provide @emotion/react (p3f1ef), requested by @chakra-ui/react
➤ YN0002: │ @chakra-ui/props-docs@npm:1.0.40 doesn't provide @emotion/styled (p2430d), requested by @chakra-ui/react
➤ YN0002: │ @chakra-ui/props-docs@npm:1.0.40 doesn't provide framer-motion (pab794), requested by @chakra-ui/react
➤ YN0002: │ @chakra-ui/props-docs@npm:1.0.40 doesn't provide react (pb8f77), requested by @chakra-ui/react
➤ YN0002: │ @chakra-ui/props-docs@npm:1.0.40 doesn't provide react-dom (p5d945), requested by @chakra-ui/react
➤ YN0002: │ @chakra-ui/skeleton@npm:1.2.2 [b0905] doesn't provide @chakra-ui/theme (pfb39f), requested by @chakra-ui/media-query
➤ YN0002: │ @chakra-ui/skeleton@npm:1.2.3 [863e7] doesn't provide @chakra-ui/theme (pd9969), requested by @chakra-ui/media-query
➤ YN0002: │ @chakra-ui/skeleton@npm:1.2.3 [863e7] doesn't provide @emotion/react (p8a157), requested by @chakra-ui/system
➤ YN0002: │ @chakra-ui/skeleton@npm:1.2.3 [863e7] doesn't provide @emotion/styled (pf6eb8), requested by @chakra-ui/system
➤ YN0002: │ @chakra-ui/switch@npm:1.3.1 [0f71e] doesn't provide framer-motion (pa9960), requested by @chakra-ui/checkbox
➤ YN0002: │ @chakra-ui/switch@npm:1.3.1 [863e7] doesn't provide framer-motion (p94192), requested by @chakra-ui/checkbox