Dataviews: Build with /wp fails when using pnpm with hoisting disabled.

[manzoorwanijk]

Description

#66825 added a way to use dataviews inside WordPress plugins and it works fine when linking the packages locally and also works fine in production when using npm.

But it fails with production version (v4.10.0) when used in pnpm with hoisting disabled.

Step-by-step reproduction instructions

For demonstration, I have created a PR in devblog-dataviews-plugin repo

• Reproducing @wordpress/dataviews build failure using pnpm with hoisting disabled wptrainingteam/devblog-dataviews-plugin#4

• Checkout the repo

• Run pnpm install

• Run pnpm run build

• See the errors, e.g. Error: Can't resolve 'colord/plugins/names'

Screenshots, screen recording, code snippet

⚠ Click to expand the full error reported ⚠

ERROR in ./node_modules/.pnpm/@wordpress+dataviews@4.10.0_@emotion+is-prop-valid@1.3.1_@types+react@18.3.16_react-dom@18.3._f43srhcltf4wnxsik4c54xireq/node_modules/@wordpress/dataviews/build-wp/index.js 163:0-59 Module not found: Error: Can't resolve 'react-dom/client' in '/devblog-dataviews-plugin/node_modules/.pnpm/@wordpress+dataviews@4.10.0_@emotion+is-prop-valid@1.3.1_@types+react@18.3.16_react-dom@18.3._f43srhcltf4wnxsik4c54xireq/node_modules/@wordpress/dataviews/build-wp' @ ./src/App.js 1:0-75 120:11-32 211:104-113 @ ./src/index.js 3:0-24 7:32-35

ERROR in ./node_modules/.pnpm/@wordpress+dataviews@4.10.0_@emotion+is-prop-valid@1.3.1_@types+react@18.3.16_react-dom@18.3.f43srhcltf4wnxsik4c54xireq/node_modules/@wordpress/dataviews/build-wp/index.js 1120:0-42
Module not found: Error: Can't resolve 'use-memo-one' in '/devblog-dataviews-plugin/node_modules/.pnpm/@wordpress+dataviews@4.10.0@emotion+is-prop-valid@1.3.1_@types+react@18.3.16_react-dom@18.3._f43srhcltf4wnxsik4c54xireq/node_modules/@wordpress/dataviews/build-wp'
@ ./src/App.js 1:0-75 120:11-32 211:104-113
@ ./src/index.js 3:0-24 7:32-35

ERROR in ./node_modules/.pnpm/@wordpress+dataviews@4.10.0_@emotion+is-prop-valid@1.3.1_@types+react@18.3.16_react-dom@18.3.f43srhcltf4wnxsik4c54xireq/node_modules/@wordpress/dataviews/build-wp/index.js 1737:0-34
Module not found: Error: Can't resolve 'deepmerge' in '/devblog-dataviews-plugin/node_modules/.pnpm/@wordpress+dataviews@4.10.0@emotion+is-prop-valid@1.3.1_@types+react@18.3.16_react-dom@18.3._f43srhcltf4wnxsik4c54xireq/node_modules/@wordpress/dataviews/build-wp'
@ ./src/App.js 1:0-75 120:11-32 211:104-113
@ ./src/index.js 3:0-24 7:32-35

ERROR in ./node_modules/.pnpm/@wordpress+dataviews@4.10.0_@emotion+is-prop-valid@1.3.1_@types+react@18.3.16_react-dom@18.3.f43srhcltf4wnxsik4c54xireq/node_modules/@wordpress/dataviews/build-wp/index.js 1738:0-48
Module not found: Error: Can't resolve 'fast-deep-equal/es6' in '/devblog-dataviews-plugin/node_modules/.pnpm/@wordpress+dataviews@4.10.0@emotion+is-prop-valid@1.3.1_@types+react@18.3.16_react-dom@18.3._f43srhcltf4wnxsik4c54xireq/node_modules/@wordpress/dataviews/build-wp'
@ ./src/App.js 1:0-75 120:11-32 211:104-113
@ ./src/index.js 3:0-24 7:32-35

ERROR in ./node_modules/.pnpm/@wordpress+dataviews@4.10.0_@emotion+is-prop-valid@1.3.1_@types+react@18.3.16_react-dom@18.3.f43srhcltf4wnxsik4c54xireq/node_modules/@wordpress/dataviews/build-wp/index.js 1739:0-48
Module not found: Error: Can't resolve 'is-plain-object' in '/devblog-dataviews-plugin/node_modules/.pnpm/@wordpress+dataviews@4.10.0@emotion+is-prop-valid@1.3.1_@types+react@18.3.16_react-dom@18.3._f43srhcltf4wnxsik4c54xireq/node_modules/@wordpress/dataviews/build-wp'
@ ./src/App.js 1:0-75 120:11-32 211:104-113
@ ./src/index.js 3:0-24 7:32-35

ERROR in ./node_modules/.pnpm/@wordpress+dataviews@4.10.0_@emotion+is-prop-valid@1.3.1_@types+react@18.3.16_react-dom@18.3.f43srhcltf4wnxsik4c54xireq/node_modules/@wordpress/dataviews/build-wp/index.js 1857:0-77
Module not found: Error: Can't resolve '@emotion/react' in '/devblog-dataviews-plugin/node_modules/.pnpm/@wordpress+dataviews@4.10.0@emotion+is-prop-valid@1.3.1_@types+react@18.3.16_react-dom@18.3._f43srhcltf4wnxsik4c54xireq/node_modules/@wordpress/dataviews/build-wp'
@ ./src/App.js 1:0-75 120:11-32 211:104-113
@ ./src/index.js 3:0-24 7:32-35

ERROR in ./node_modules/.pnpm/@wordpress+dataviews@4.10.0_@emotion+is-prop-valid@1.3.1_@types+react@18.3.16_react-dom@18.3.f43srhcltf4wnxsik4c54xireq/node_modules/@wordpress/dataviews/build-wp/index.js 1858:0-46
Module not found: Error: Can't resolve '@emotion/utils' in '/devblog-dataviews-plugin/node_modules/.pnpm/@wordpress+dataviews@4.10.0@emotion+is-prop-valid@1.3.1_@types+react@18.3.16_react-dom@18.3._f43srhcltf4wnxsik4c54xireq/node_modules/@wordpress/dataviews/build-wp'
@ ./src/App.js 1:0-75 120:11-32 211:104-113
@ ./src/index.js 3:0-24 7:32-35

ERROR in ./node_modules/.pnpm/@wordpress+dataviews@4.10.0_@emotion+is-prop-valid@1.3.1_@types+react@18.3.16_react-dom@18.3.f43srhcltf4wnxsik4c54xireq/node_modules/@wordpress/dataviews/build-wp/index.js 1859:0-45
Module not found: Error: Can't resolve '@emotion/css' in '/devblog-dataviews-plugin/node_modules/.pnpm/@wordpress+dataviews@4.10.0@emotion+is-prop-valid@1.3.1_@types+react@18.3.16_react-dom@18.3._f43srhcltf4wnxsik4c54xireq/node_modules/@wordpress/dataviews/build-wp'
@ ./src/App.js 1:0-75 120:11-32 211:104-113
@ ./src/index.js 3:0-24 7:32-35

ERROR in ./node_modules/.pnpm/@wordpress+dataviews@4.10.0_@emotion+is-prop-valid@1.3.1_@types+react@18.3.16_react-dom@18.3.f43srhcltf4wnxsik4c54xireq/node_modules/@wordpress/dataviews/build-wp/index.js 1894:0-29
Module not found: Error: Can't resolve 'memize' in '/devblog-dataviews-plugin/node_modules/.pnpm/@wordpress+dataviews@4.10.0@emotion+is-prop-valid@1.3.1_@types+react@18.3.16_react-dom@18.3._f43srhcltf4wnxsik4c54xireq/node_modules/@wordpress/dataviews/build-wp'
@ ./src/App.js 1:0-75 120:11-32 211:104-113
@ ./src/index.js 3:0-24 7:32-35

ERROR in ./node_modules/.pnpm/@wordpress+dataviews@4.10.0_@emotion+is-prop-valid@1.3.1_@types+react@18.3.16_react-dom@18.3.f43srhcltf4wnxsik4c54xireq/node_modules/@wordpress/dataviews/build-wp/index.js 1895:0-40
Module not found: Error: Can't resolve 'colord' in '/devblog-dataviews-plugin/node_modules/.pnpm/@wordpress+dataviews@4.10.0@emotion+is-prop-valid@1.3.1_@types+react@18.3.16_react-dom@18.3._f43srhcltf4wnxsik4c54xireq/node_modules/@wordpress/dataviews/build-wp'
@ ./src/App.js 1:0-75 120:11-32 211:104-113
@ ./src/index.js 3:0-24 7:32-35

ERROR in ./node_modules/.pnpm/@wordpress+dataviews@4.10.0_@emotion+is-prop-valid@1.3.1_@types+react@18.3.16_react-dom@18.3.f43srhcltf4wnxsik4c54xireq/node_modules/@wordpress/dataviews/build-wp/index.js 1896:0-47
Module not found: Error: Can't resolve 'colord/plugins/names' in '/devblog-dataviews-plugin/node_modules/.pnpm/@wordpress+dataviews@4.10.0@emotion+is-prop-valid@1.3.1_@types+react@18.3.16_react-dom@18.3._f43srhcltf4wnxsik4c54xireq/node_modules/@wordpress/dataviews/build-wp'
@ ./src/App.js 1:0-75 120:11-32 211:104-113
@ ./src/index.js 3:0-24 7:32-35

ERROR in ./node_modules/.pnpm/@wordpress+dataviews@4.10.0_@emotion+is-prop-valid@1.3.1_@types+react@18.3.16_react-dom@18.3.f43srhcltf4wnxsik4c54xireq/node_modules/@wordpress/dataviews/build-wp/index.js 2235:0-53
Module not found: Error: Can't resolve 'change-case' in '/devblog-dataviews-plugin/node_modules/.pnpm/@wordpress+dataviews@4.10.0@emotion+is-prop-valid@1.3.1_@types+react@18.3.16_react-dom@18.3._f43srhcltf4wnxsik4c54xireq/node_modules/@wordpress/dataviews/build-wp'
@ ./src/App.js 1:0-75 120:11-32 211:104-113
@ ./src/index.js 3:0-24 7:32-35

ERROR in ./node_modules/.pnpm/@wordpress+dataviews@4.10.0_@emotion+is-prop-valid@1.3.1_@types+react@18.3.16_react-dom@18.3.f43srhcltf4wnxsik4c54xireq/node_modules/@wordpress/dataviews/build-wp/index.js 2356:0-43
Module not found: Error: Can't resolve '@emotion/styled/base' in '/devblog-dataviews-plugin/node_modules/.pnpm/@wordpress+dataviews@4.10.0@emotion+is-prop-valid@1.3.1_@types+react@18.3.16_react-dom@18.3._f43srhcltf4wnxsik4c54xireq/node_modules/@wordpress/dataviews/build-wp'
@ ./src/App.js 1:0-75 120:11-32 211:104-113
@ ./src/index.js 3:0-24 7:32-35

ERROR in ./node_modules/.pnpm/@wordpress+dataviews@4.10.0_@emotion+is-prop-valid@1.3.1_@types+react@18.3.16_react-dom@18.3.f43srhcltf4wnxsik4c54xireq/node_modules/@wordpress/dataviews/build-wp/index.js 3160:0-47
Module not found: Error: Can't resolve 'highlight-words-core' in '/devblog-dataviews-plugin/node_modules/.pnpm/@wordpress+dataviews@4.10.0@emotion+is-prop-valid@1.3.1_@types+react@18.3.16_react-dom@18.3._f43srhcltf4wnxsik4c54xireq/node_modules/@wordpress/dataviews/build-wp'
@ ./src/App.js 1:0-75 120:11-32 211:104-113
@ ./src/index.js 3:0-24 7:32-35

ERROR in ./node_modules/.pnpm/@wordpress+dataviews@4.10.0_@emotion+is-prop-valid@1.3.1_@types+react@18.3.16_react-dom@18.3.f43srhcltf4wnxsik4c54xireq/node_modules/@wordpress/dataviews/build-wp/index.js 3831:0-45
Module not found: Error: Can't resolve '@use-gesture/react' in '/devblog-dataviews-plugin/node_modules/.pnpm/@wordpress+dataviews@4.10.0@emotion+is-prop-valid@1.3.1_@types+react@18.3.16_react-dom@18.3._f43srhcltf4wnxsik4c54xireq/node_modules/@wordpress/dataviews/build-wp'
@ ./src/App.js 1:0-75 120:11-32 211:104-113
@ ./src/index.js 3:0-24 7:32-35

ERROR in ./node_modules/.pnpm/@wordpress+dataviews@4.10.0_@emotion+is-prop-valid@1.3.1_@types+react@18.3.16_react-dom@18.3.f43srhcltf4wnxsik4c54xireq/node_modules/@wordpress/dataviews/build-wp/index.js 5214:0-177
Module not found: Error: Can't resolve '@floating-ui/react-dom' in '/devblog-dataviews-plugin/node_modules/.pnpm/@wordpress+dataviews@4.10.0@emotion+is-prop-valid@1.3.1_@types+react@18.3.16_react-dom@18.3._f43srhcltf4wnxsik4c54xireq/node_modules/@wordpress/dataviews/build-wp'
@ ./src/App.js 1:0-75 120:11-32 211:104-113
@ ./src/index.js 3:0-24 7:32-35

ERROR in ./node_modules/.pnpm/@wordpress+dataviews@4.10.0_@emotion+is-prop-valid@1.3.1_@types+react@18.3.16_react-dom@18.3.f43srhcltf4wnxsik4c54xireq/node_modules/@wordpress/dataviews/build-wp/index.js 5215:0-39
Module not found: Error: Can't resolve 'framer-motion' in '/devblog-dataviews-plugin/node_modules/.pnpm/@wordpress+dataviews@4.10.0@emotion+is-prop-valid@1.3.1_@types+react@18.3.16_react-dom@18.3._f43srhcltf4wnxsik4c54xireq/node_modules/@wordpress/dataviews/build-wp'
@ ./src/App.js 1:0-75 120:11-32 211:104-113
@ ./src/index.js 3:0-24 7:32-35

ERROR in ./node_modules/.pnpm/@wordpress+dataviews@4.10.0_@emotion+is-prop-valid@1.3.1_@types+react@18.3.16_react-dom@18.3.f43srhcltf4wnxsik4c54xireq/node_modules/@wordpress/dataviews/build-wp/index.js 5375:0-41
Module not found: Error: Can't resolve '@emotion/cache' in '/devblog-dataviews-plugin/node_modules/.pnpm/@wordpress+dataviews@4.10.0@emotion+is-prop-valid@1.3.1_@types+react@18.3.16_react-dom@18.3._f43srhcltf4wnxsik4c54xireq/node_modules/@wordpress/dataviews/build-wp'
@ ./src/App.js 1:0-75 120:11-32 211:104-113
@ ./src/index.js 3:0-24 7:32-35

ERROR in ./node_modules/.pnpm/@wordpress+dataviews@4.10.0_@emotion+is-prop-valid@1.3.1_@types+react@18.3.16_react-dom@18.3.f43srhcltf4wnxsik4c54xireq/node_modules/@wordpress/dataviews/build-wp/index.js 5376:0-29
Module not found: Error: Can't resolve 'uuid' in '/devblog-dataviews-plugin/node_modules/.pnpm/@wordpress+dataviews@4.10.0@emotion+is-prop-valid@1.3.1_@types+react@18.3.16_react-dom@18.3._f43srhcltf4wnxsik4c54xireq/node_modules/@wordpress/dataviews/build-wp'
@ ./src/App.js 1:0-75 120:11-32 211:104-113
@ ./src/index.js 3:0-24 7:32-35

ERROR in ./node_modules/.pnpm/@wordpress+dataviews@4.10.0_@emotion+is-prop-valid@1.3.1_@types+react@18.3.16_react-dom@18.3.f43srhcltf4wnxsik4c54xireq/node_modules/@wordpress/dataviews/build-wp/index.js 8459:0-34
Module not found: Error: Can't resolve 'date-fns' in '/devblog-dataviews-plugin/node_modules/.pnpm/@wordpress+dataviews@4.10.0@emotion+is-prop-valid@1.3.1_@types+react@18.3.16_react-dom@18.3._f43srhcltf4wnxsik4c54xireq/node_modules/@wordpress/dataviews/build-wp'
@ ./src/App.js 1:0-75 120:11-32 211:104-113
@ ./src/index.js 3:0-24 7:32-35

ERROR in ./node_modules/.pnpm/@wordpress+dataviews@4.10.0_@emotion+is-prop-valid@1.3.1_@types+react@18.3.16_react-dom@18.3.f43srhcltf4wnxsik4c54xireq/node_modules/@wordpress/dataviews/build-wp/index.js 9776:0-45
Module not found: Error: Can't resolve 'colord/plugins/a11y' in '/devblog-dataviews-plugin/node_modules/.pnpm/@wordpress+dataviews@4.10.0@emotion+is-prop-valid@1.3.1_@types+react@18.3.16_react-dom@18.3._f43srhcltf4wnxsik4c54xireq/node_modules/@wordpress/dataviews/build-wp'
@ ./src/App.js 1:0-75 120:11-32 211:104-113
@ ./src/index.js 3:0-24 7:32-35


Environment info

No response

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[anomiex]

The problem is in the indirect non-@wordpress dependencies of @wordpress/dataviews: they're not included in the /wp bundle and the package also doesn't declare them as dependencies (or peerDependencies). Thus, without hoisting, they can't be found. Yarn's P'n'P will likely have the same problem.

While this could be worked around by doing something like this in the example PR's package.json to inform pnpm of the undeclared dependencies

  "pnpm": {
      "packageExtensions": {
          "@wordpress/dataviews": {
              "dependencies": {
                  "change-case": "*",
                  "colord": "*",
                  "date-fns": "*",
                  "deepmerge": "*",
                  "@emotion/cache": "*",
                  "@emotion/css": "*",
                  "@emotion/react": "*",
                  "@emotion/styled": "*",
                  "@emotion/utils": "*",
                  "fast-deep-equal": "*",
                  "@floating-ui/react-dom": "*",
                  "framer-motion": "*",
                  "highlight-words-core": "*",
                  "is-plain-object": "*",
                  "memize": "*",
                  "react-dom": "*",
                  "@use-gesture/react": "*",
                  "use-memo-one": "*",
                  "uuid": "*"
              }
          }
      }
  }

(and hope pnpm's deduping picks up the correct versions of everything) it'd be better if this could be resolved directly.

[jsnajdr]

@manzoorwanijk Is this is the same thing as what I described in this comment? #66825 (comment)

Also, the dataviews/wp script is basically the dataviews and components libraries merged together into one. If dataviews has npm dependencies A and B and components has dependencies C and D, then the resulting dataviews/wp package should have dependencies A, B, C and D. This is not correctly expressed in dataviews/package.json. It not guaranteed that the C and D dependencies will be at the place in node_modules where they are expected to be.

The only way how to solve is that @wordpress/dataviews-wp is a separate package with its own package.json file with the correct dependencies field. It cannot be just another exports field in the main package, because the dependencies are different.

[manzoorwanijk]

Is this is the same thing as what I described in this comment? #66825 (comment)

Yes, pretty much.

[anomiex]

The only way how to solve is that @wordpress/dataviews-wp is a separate package with its own package.json file with the correct dependencies field. It cannot be just another exports field in the main package, because the dependencies are different.

It could if you add the additional dependencies to the @wordpress/dataviews package.json. You might have other reasons for rejecting that possibility though. 🙂

Overall this shouldn't actually install any extra packages, since @wordpress/dataviews depends on @wordpress/components and such and the added deps will already be installed for those. With pnpm it'll just create some extra symlinks, and with yarn it'll add a few extra entries in its package metadata file to record the deps.

[anomiex]

In addition to the above, building Storybook stories seems to also need dependencies added for @wordpress/date and @wordpress/hooks. For normal builds they're presumably not needed due to the dependency extraction plugin.