Yarn 2 (Plug n' Play) exposes dependency inconsistencies

01 / FAILURE SIGNATURE

Captured in a clean container

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.

02 / ENVIRONMENT RECIPE

Base commit

a9300a84b6c684f83e7872eff1dbaf888cf797ea

Manifest

packages/number-input/package.json

Reproduce

set -e cd /work npm install --prefix /opt/envgap-build --no-save @babel/cli@7.10.5 @babel/core@7.10.5 @babel/preset-env@7.10.4 @babel/preset-typescript@7.10.4 @babel/preset-react@7.10.4 @babel/plugin-proposal-class-properties@7.10.4 babel-plugin-chakra-ui@1.0.0-rc.0 corepack enable corepack prepare yarn@2.1.1 --activate set -e cd /work ln -sfn /opt/envgap-build/node_modules /work/node_modules BABEL_ENV=cjs /opt/envgap-build/node_modules/.bin/babel packages/number-input/src --root-mode upward --extensions .ts,.tsx -d packages/number-input/dist/cjs --source-maps rm -rf /tmp/envgap-consumer mkdir -p /tmp/envgap-consumer cd packages/number-input npm pack --pack-destination /tmp/envgap-consumer cd /tmp/envgap-consumer printf '%s' '{"name":"envgap-number-input-runtime","private":true,"dependencies":{"@chakra-ui/number-input":"file:./chakra-ui-number-input-1.0.0-rc.0.tgz","@chakra-ui/system":"1.0.0-rc.0","react":"16.13.1","react-dom":"16.13.1"}}' > package.json yarn install yarn node -e 'const p=require("pnpapi"),fs=require("fs");const seen=new Set,locators=[],stack=[p.findPackageLocator(process.cwd()+"/")];while(stack.length){const l=stack.pop();if(!l)continue;const k=JSON.stringify(l);if(seen.has(k))continue;seen.add(k);locators.push(l);const i=p.getPackageInformation(l);for(const [name,ref]of i.packageDependencies){if(ref===null)continue;stack.push(Array.isArray(ref)?{name:ref[0],reference:ref[1]}:{name,reference:ref});}}const j=require("./package.json");j.dependenciesMeta={};for(const l of locators)if(l.name)j.dependenciesMeta[l.name]={unplugged:true};fs.writeFileSync("package.json",JSON.stringify(j,null,2));' yarn install cd /tmp/envgap-consumer && yarn node -e 'const React=require("react");const {renderToStaticMarkup}=require("react-dom/server");const {useNumberInput}=require("@chakra-ui/number-input/dist/cjs/use-number-input");function Probe(){const p=useNumberInput({defaultValue:5});return React.createElement("input",p.getInputProps());}const html=renderToStaticMarkup(React.createElement(Probe));if(!html.includes("value=\"5\""))throw Error(html);console.log(html);'

Run under trace

cd /tmp/envgap-consumer && yarn node -e 'const React=require("react");const {renderToStaticMarkup}=require("react-dom/server");const {useNumberInput}=require("@chakra-ui/number-input/dist/cjs/use-number-input");function Probe(){const p=useNumberInput({defaultValue:5});return React.createElement("input",p.getInputProps());}const html=renderToStaticMarkup(React.createElement(Probe));if(!html.includes("value=\"5\""))throw Error(html);console.log(html);'

diff --git a/packages/number-input/package.json b/packages/number-input/package.json
index 056e7951a..187d59bcd 100644
--- a/packages/number-input/package.json
+++ b/packages/number-input/package.json
@@ -54,7 +54,8 @@
   "dependencies": {
     "@chakra-ui/counter": "1.0.0-rc.0",
     "@chakra-ui/icon": "1.0.0-rc.0",
-    "@chakra-ui/utils": "1.0.0-rc.0"
+    "@chakra-ui/utils": "1.0.0-rc.0",
+    "@chakra-ui/hooks": "1.0.0-rc.0"
   },
   "devDependencies": {
     "@chakra-ui/system": "1.0.0-rc.0"

03 / ORIGINAL ISSUE TEXT

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

1. Run `yarn` to install dependencies

1. 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](https://github.com/beforan/chrakra-ui-v1-yarn2)):



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.

04 / LABELS

Labels checked by running the task · assistant reviewed

[
  {
    "category": "misspecification",
    "rule": "diff.changes_existing_manifest_line",
    "source": "manifest_diff:packages/number-input/package.json",
    "excerpt": "-    \"@chakra-ui/utils\": \"1.0.0-rc.0\"\n+    \"@chakra-ui/utils\": \"1.0.0-rc.0\",\n+    \"@chakra-ui/hooks\": \"1.0.0-rc.0\""
  },
  {
    "category": "security",
    "rule": "issue.security_keyword",
    "source": "issue_body",
    "excerpt": "ssue and fix.\r\n\r\nIt'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.\r\n\r\n**Steps to Reproduce**\r\n\r\n"
  }
]

Historical install-only results are not EnvGap validation.

Fixed harness bootstrap installs the dated Babel tool versions from the root build configuration. It compiles the original NumberInput TypeScript using the original babel.config.js; no source or compiler configuration is patched.

The local built NumberInput package is packed from this checkout and installed in a disposable Yarn2 PnP consumer in /tmp. The consumer provides existing package peers (system, React, ReactDOM) and calls the original useNumberInput hook through React server rendering. This is an execution harness for the reported package-consumer context, not a substituted upstream implementation.

Every resolved Yarn PnP package is unplugged into physical files before execution. Dependency resolution remains strict PnP; this exposes real loaded files to syscall tracing instead of hiding loads inside zip archives. Original failure was independently reverified after unplugging.

Yarn2.1.1 is fixed harness tooling; Yarn registry resolution does not honor npm_config_before. Its transitive dependencies are current registry selections, so complete historical registry reconstruction is not claimed. npm bootstrap honors issue-date npm_config_before during oracle evaluation.

D2 enumerates the actually installed PnP package graph with findPackageLocator/getPackageInformation, including version references. D3 is parsed from actual READ syscalls by the benchmark tracer.

D3 includes the subject package and corepack bootstrap executable because they actually load; the reference normalization does not exclude those names. The complete component library and browser interaction suite are outside this minimal hook-render workload.

The defect is a missing runtime manifest declaration; the requested category rules do not explicitly describe adding a missing dependency inside a manifest. Category review must record that taxonomy gap rather than invent a signature.

Every resolve recreates only the disposable /tmp/envgap-consumer directory, so local-tarball Yarn caches from a previous agent repair cannot conceal a changed package manifest.

Preparation uses current registries. Historical package availability is not enforced here; execution metadata records this limitation separately from the oracle's date-bounding policy.