wp-scripts: Build fails when using pnpm with hoisting disabled.

[manzoorwanijk]

Description

While reproducing #67864, I noticed that if I don't install @bable/runtime as a dependency, I see an error when using pnpm with hoisting disabled.

Error: Cannot find module '@babel/runtime/helpers/interopRequireDefault'

The fix the probably to have @bable/runtime as a dependency for the scripts package.

⚠ Click to expand the full error reported ⚠

> wp-scripts build

[webpack-cli] Failed to load '/node_modules/.pnpm/@wordpress+scripts@30.7.0_@playwright+test@1.49.1_@types+eslint@9.6.1_@types+node@22.10.2_@ty_wroepmchm5g4fgh3o3zlqgqj4a/node_modules/@wordpress/scripts/config/webpack.config.js' config
[webpack-cli] Error: Cannot find module '@babel/runtime/helpers/interopRequireDefault'
Require stack:

• /node_modules/.pnpm/[email protected]/node_modules/rtlcss-webpack-plugin/dist/src/index.js
• /node_modules/.pnpm/@wordpress+scripts@30.7.0_@playwright+test@1.49.1_@types+eslint@9.6.1_@types+node@22.10.2_@ty_wroepmchm5g4fgh3o3zlqgqj4a/node_modules/@wordpress/scripts/config/webpack.config.js
• /node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/webpack-cli/lib/webpack-cli.js
• /node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/webpack-cli/lib/bootstrap.js
• /node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/webpack-cli/bin/cli.js
• /node_modules/.pnpm/[email protected][email protected]/node_modules/webpack/bin/webpack.js
  at Function.resolveFilename (node:internal/modules/cjs/loader:1249:15)
  at Function.load (node:internal/modules/cjs/loader:1075:27)
  at TracingChannel.traceSync (node:diagnostics_channel:315:14)
  at wrapModuleLoad (node:internal/modules/cjs/loader:218:24)
  at Module.require (node:internal/modules/cjs/loader:1340:12)
  at require (node:internal/modules/helpers:141:16)
  at Object. (/node_modules/.pnpm/[email protected]/node_modules/rtlcss-webpack-plugin/dist/src/index.js:3:30)
  at Module.compile (node:internal/modules/cjs/loader:1546:14)
  at Object..js (node:internal/modules/cjs/loader:1689:10)
  at Module.load (node:internal/modules/cjs/loader:1318:32) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
  '/node_modules/.pnpm/[email protected]/node_modules/rtlcss-webpack-plugin/dist/src/index.js',
  '/node_modules/.pnpm/@[email protected]@[email protected]@[email protected]@types+node@22.10.2_@ty_wroepmchm5g4fgh3o3zlqgqj4a/node_modules/@wordpress/scripts/config/webpack.config.js',
  '/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/webpack-cli/lib/webpack-cli.js',
  '/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/webpack-cli/lib/bootstrap.js',
  '/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/webpack-cli/bin/cli.js',
  '/node_modules/.pnpm/[email protected][email protected]/node_modules/webpack/bin/webpack.js'
  ]
  }
   ELIFECYCLE  Command failed with exit code 2.

Step-by-step reproduction instructions

• Checkout Reproducing @wordpress/dataviews build failure using pnpm with hoisting disabled wptrainingteam/devblog-dataviews-plugin#4
• Run pnpm remove @babel/runtime
• Run pnpm install
• Run pnpm build
• See the build failure

Screenshots, screen recording, code snippet

No response

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

[gziolo]

@babel/runtime is listed as a dependency for @wordpress/babel-preset-default:

gutenberg/packages/babel-preset-default/package.json

Line 40 in 94df941

"@babel/runtime": "7.25.7",

which is listed as a dependency for @wordpress/scripts:

gutenberg/packages/scripts/package.json

Line 38 in 94df941

"@wordpress/babel-preset-default": "*",

I'm not sure what exactly happens when using pnpmwith hoisting disabled, but I would expect it has the package installed.

Is that issue specific to @wordpress/dataviews package with the build-wp version or a general problem?

[manzoorwanijk]

I'm not sure what exactly happens when using pnpm with hoisting disabled, but I would expect it has the package installed.

It's something related to the import of rtlcss-webpack-plugin which interestingly defines @babel/runtime as a dependency

Is that issue specific to @wordpress/dataviews package with the build-wp version or a general problem?

No, it's a general issue.

[gziolo]

I was checking rtlcss-webpack-plugin and it might not be actively maintained as there is PR ready for updating @babel/runtime dependency in their repository. We also have a related issue tracked already:

• [@wordpress/scripts][rtlcss-webpack-plugin] Some internal modules are deprecated. #62007

The plugin is so simple that we could consider forking it. In fact, we already use a fork ... 😅

[gziolo]

I'm working on a potential fix:

• Scripts: Use fork of rtlcss-webpack-plugin to fix issues with deps #68201