`@wordpress/viewport` is missing a dependency on `@wordpress/element`

[anomiex]

The package @wordpress/viewport attempts to use @wordpress/element from build/with-viewport-match.js and build-module/with-viewport-match.js, but does not declare a dependency or peer dependency on that package.

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 yarn:

1. Create a temporary directory, and cd into it.
2. echo '{}' > package.json
3. yarn set version stable
4. yarn add @wordpress/viewport react@^17 react-dom@^17 @babel/core jsdom global-jsdom
5. Run either of the following:
   • yarn node -e 'require( "global-jsdom/register" ); const x = require( "@wordpress/viewport" ); console.log( typeof x );'
   • yarn node --input-type=module -e 'import "global-jsdom/register"; import x from "@wordpress/viewport"; console.log( typeof x );'

With pnpm:

1. Create a temporary directory, and cd into it.
2. echo 'hoist-pattern=[]' > .npmrc
3. pnpm add @wordpress/viewport react@^17 react-dom@^17 @babel/core jsdom global-jsdom
4. Run either of the following:
   • node -e 'require( "global-jsdom/register" ); const x = require( "@wordpress/viewport" ); console.log( typeof x );'
   • node --input-type=module -e 'import "global-jsdom/register"; import x from "@wordpress/viewport"; console.log( typeof x );'

Expected behavior

Output along the lines of

object

Actual behavior

With yarn:

Error: @wordpress/viewport tried to access @wordpress/element, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

Required package: @wordpress/element
Required by: @wordpress/viewport@virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:4.7.0 (via /tmp/test/.yarn/__virtual__/@wordpress-viewport-virtual-8a5601fdae/0/cache/@wordpress-viewport-npm-4.7.0-ffdf21b104-d858857866.zip/node_modules/@wordpress/viewport/build/)

With pnpm:

Error: Cannot find module '@wordpress/element'
Require stack:
- /tmp/test/node_modules/.pnpm/@wordpress+viewport@4.7.0_react@17.0.2/node_modules/@wordpress/viewport/build/with-viewport-match.js
- /tmp/test/node_modules/.pnpm/@wordpress+viewport@4.7.0_react@17.0.2/node_modules/@wordpress/viewport/build/if-viewport-matches.js
- /tmp/test/node_modules/.pnpm/@wordpress+viewport@4.7.0_react@17.0.2/node_modules/@wordpress/viewport/build/index.js

[Mamaduka]

The @wordpress/element is only used for a single unit test. It might be better to refactor this test than add the package as a dependency.

[gziolo]

There are React components in the package that use @wordpress/element indirectly through JSX transformation with Babel.

[TusharP05]

If someone is not working on it. Can you please assign it to me?

[anomiex]

#41486 has been waiting for review for over a year. I don't think you can help with that part.