@wordpress/admin-ui, @wordpress/icons, and @wordpress/media-utils are missing dependencies or peer dependencies on react.
This happens to work with npm's hoisting due to other dependencies pulling that package in, but will fail with yarn's p'n'p or pnpm with hoisting disabled.
Reproduction
With pnpm:
- Create a temporary directory, and cd into it.
echo 'hoist-pattern=[]' > .npmrcpnpm add @wordpress/icons @wordpress/admin-ui @wordpress/media-utils global-jsdom- Run one of these:
node -e 'const x = require( "@wordpress/icons" ); console.log( typeof x );'node -e 'const x = require( "@wordpress/admin-ui" ); console.log( typeof x );'node -e 'require( "global-jsdom/register" ); const x = require( "@wordpress/media-utils" ); console.log( typeof x );'
With yarn:
- Create a temporary directory, and cd into it.
echo '{}' > package.jsonyarn set version stableyarn add @wordpress/icons @wordpress/admin-ui @wordpress/media-utils global-jsdom jsdom- Run one of these:
yarn node -e 'const x = require( "@wordpress/icons" ); console.log( typeof x );'yarn node -e 'const x = require( "@wordpress/admin-ui" ); console.log( typeof x );'yarn node -e 'require( "global-jsdom/register" ); const x = require( "@wordpress/media-utils" ); console.log( typeof x );'
Expected behavior
Output along the lines of
Actual behavior
With pnpm:
Error: Cannot find module 'react/jsx-runtime'
Require stack:
- /tmp/test/node_modules/.pnpm/@wordpress+admin-ui@1.3.0_@emotion+is-prop-valid@1.4.0_@types+react@18.3.26_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/admin-ui/build/navigable-region/index.js
- /tmp/test/node_modules/.pnpm/@wordpress+admin-ui@1.3.0_@emotion+is-prop-valid@1.4.0_@types+react@18.3.26_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/admin-ui/build/index.js
- /tmp/test/[eval]
at Function._resolveFilename (node:internal/modules/cjs/loader:1383:15)
at defaultResolveImpl (node:internal/modules/cjs/loader:1025:19)
at resolveForCJSWithHooks (node:internal/modules/cjs/loader:1030:22)
at Function._load (node:internal/modules/cjs/loader:1192:37)
at TracingChannel.traceSync (node:diagnostics_channel:328:14)
at wrapModuleLoad (node:internal/modules/cjs/loader:237:24)
at Module.require (node:internal/modules/cjs/loader:1463:12)
at require (node:internal/modules/helpers:147:16)
at Object.<anonymous> (/tmp/test/node_modules/.pnpm/@wordpress+admin-ui@1.3.0_@emotion+is-prop-valid@1.4.0_@types+react@18.3.26_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/admin-ui/build/navigable-region/index.js:38:26)
at Module._compile (node:internal/modules/cjs/loader:1706:14) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/tmp/test/node_modules/.pnpm/@wordpress+admin-ui@1.3.0_@emotion+is-prop-valid@1.4.0_@types+react@18.3.26_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/admin-ui/build/navigable-region/index.js',
'/tmp/test/node_modules/.pnpm/@wordpress+admin-ui@1.3.0_@emotion+is-prop-valid@1.4.0_@types+react@18.3.26_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/admin-ui/build/index.js',
'/tmp/test/[eval]'
]
}
With yarn:
Error: @wordpress/admin-ui 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/jsx-runtime")
Required by: @wordpress/admin-ui@npm:1.3.0 (via /home/user/.yarn/berry/cache/@wordpress-admin-ui-npm-1.3.0-f18dfc892e-10c0.zip/node_modules/@wordpress/admin-ui/build/navigable-region/)
Require stack:
- /home/user/.yarn/berry/cache/@wordpress-admin-ui-npm-1.3.0-f18dfc892e-10c0.zip/node_modules/@wordpress/admin-ui/build/navigable-region/index.js
- /home/user/.yarn/berry/cache/@wordpress-admin-ui-npm-1.3.0-f18dfc892e-10c0.zip/node_modules/@wordpress/admin-ui/build/index.js
- /tmp/test/[eval]
at require$$0.Module._resolveFilename (/tmp/test/.pnp.cjs:10237:13)
at defaultResolveImpl (node:internal/modules/cjs/loader:1025:19)
at resolveForCJSWithHooks (node:internal/modules/cjs/loader:1030:22)
at Function.<anonymous> (node:internal/modules/cjs/loader:1192:37)
at require$$0.Module._load (/tmp/test/.pnp.cjs:10123:31)
at TracingChannel.traceSync (node:diagnostics_channel:328:14)
at wrapModuleLoad (node:internal/modules/cjs/loader:237:24)
at Module.require (node:internal/modules/cjs/loader:1463:12)
at require (node:internal/modules/helpers:147:16)
at Object.<anonymous> (/home/user/.yarn/berry/cache/@wordpress-admin-ui-npm-1.3.0-f18dfc892e-10c0.zip/node_modules/@wordpress/admin-ui/build/navigable-region/index.js:38:26)
@wordpress/admin-ui,@wordpress/icons, and@wordpress/media-utilsare missing dependencies or peer dependencies onreact.This happens to work with
npm's hoisting due to other dependencies pulling that package in, but will fail with yarn's p'n'p or pnpm with hoisting disabled.Reproduction
With pnpm:
echo 'hoist-pattern=[]' > .npmrcpnpm add @wordpress/icons @wordpress/admin-ui @wordpress/media-utils global-jsdomnode -e 'const x = require( "@wordpress/icons" ); console.log( typeof x );'node -e 'const x = require( "@wordpress/admin-ui" ); console.log( typeof x );'node -e 'require( "global-jsdom/register" ); const x = require( "@wordpress/media-utils" ); console.log( typeof x );'With yarn:
echo '{}' > package.jsonyarn set version stableyarn add @wordpress/icons @wordpress/admin-ui @wordpress/media-utils global-jsdom jsdomyarn node -e 'const x = require( "@wordpress/icons" ); console.log( typeof x );'yarn node -e 'const x = require( "@wordpress/admin-ui" ); console.log( typeof x );'yarn node -e 'require( "global-jsdom/register" ); const x = require( "@wordpress/media-utils" ); console.log( typeof x );'Expected behavior
Output along the lines of
Actual behavior
With pnpm:
With yarn: