Require of ES Module is not supported

[anomiex]

Description

When attempting to use some packages (e.g. @wordpress/blocks, @wordpress/data, @wordpress/element, @wordpress/redux-routine) outside of a bundler like Webpack, it produces an error like this:

/tmp/test/node_modules/@wordpress/redux-routine/build/is-action.js:11
var _isPlainObj = _interopRequireDefault(require("is-plain-obj"));
                                         ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /tmp/test/node_modules/is-plain-obj/index.js from /tmp/test/node_modules/@wordpress/redux-routine/build/is-action.js not supported.
Instead change the require of index.js in /tmp/test/node_modules/@wordpress/redux-routine/build/is-action.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/tmp/test/node_modules/@wordpress/redux-routine/build/is-action.js:11:42)
    at Object.<anonymous> (/tmp/test/node_modules/@wordpress/redux-routine/build/runtime.js:16:17)
    at Object.<anonymous> (/tmp/test/node_modules/@wordpress/redux-routine/build/index.js:12:39)
    at Object.<anonymous> (/tmp/test/node_modules/@wordpress/data/build/redux-store/index.js:18:44)
    at Object.<anonymous> (/tmp/test/node_modules/@wordpress/data/build/registry.js:14:42)
    at Object.<anonymous> (/tmp/test/node_modules/@wordpress/data/build/default-registry.js:8:17)
    at Object.<anonymous> (/tmp/test/node_modules/@wordpress/data/build/index.js:108:47)
    at Object.<anonymous> (/tmp/test/node_modules/@wordpress/blocks/build/store/index.js:10:13)
    at Object.<anonymous> (/tmp/test/node_modules/@wordpress/blocks/build/index.js:16:14)
    at [eval]:1:1
    at Script.runInThisContext (node:vm:129:12)
    at Object.runInThisContext (node:vm:313:38)
    at [eval]-wrapper:6:22 {
  code: 'ERR_REQUIRE_ESM'
}

Step-by-step reproduction instructions

1. Begin in an empty directory.
2. npm add @wordpress/blocks
3. Try node -e 'require( "@wordpress/blocks" );' or node --input-type=module -e 'import blocks from "@wordpress/blocks";'

Screenshots, screen recording, code snippet

No response

Environment info

• Node version v16.17.0

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

Analysis and workarounds

The main problem is that the CommonJS build tries to require the ESM-only module is-plain-obj. This is never going to work.

A secondary problem is that the ESM builds of the Gutenberg packages are not declared via exports in package.json, and some environments (like node and jest) do not understand the modules field. So even in ESM environments, the CommonJS build is used.

Mitigating factors here are

• These packages seem like they're normally going to be used in Webpack bundles, and normal Webpack configurations do understand the modules field and even if using the CommonJS build will transpile is-plain-obj back to CommonJS instead of raising an error.
• Jest and babel-jest in their normal mode of operation will similarly transpile is-plain-obj back to CommonJS instead of raising an error if transformIgnorePatterns is set properly in the Jest config (as I see you've done in your @wordpress/jest-preset-default package).

The main problem I'm running into here is with the use of Jest in ESM mode. In that case babel-jest will not transpile is-plain-obj, even when transformIgnorePatterns is set properly, leading to the error as described here. It might help to configure Jest's resolver to understand the modules field using packageFilter and so use the ESM build of the Gutenberg packages, but when I tried that in our repo I ran into a Jest bug.

[ockham]

cc/ @tyxla as I think you've worked on this in #43179 and #43271 😄

[tyxla]

I think that calls for replacing the package already. We're still using CommonJS in far too many places, so I think the best and less fragile way to go around this is to just replace it. We talked about it with @gziolo and agreed that if there's one more time this breaks, we're going to replace the package. Let me work on a PR for that.

[tyxla]

Here's #43511 to suggest switching to a CJS-compatible package.