PhosphorIcon 2.0.9 - require() of ES modules is not supported

[cristiano-giacomi]

In our Design System we have an icon package that uses PhosphorIcon. This package is built both in cjs and esm.

With the 2.0.9 version, presumably after the insertion of type: “module” in the package.json file, we encountered this error when trying to build a Next.js app with our DS icon package.

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /app/node_modules/@phosphor-icons/react/dist/index.umd.js
require() of ES modules is not supported.
require() of /app/node_modules/@phosphor-icons/react/dist/index.umd.js from /app/node_modules/@docsity/ui-kit-icons/lib/cjs/index.js is an ES module file as it is a .js file whose nearest parent package.json contains “type”: “module” which defines all .js files in that package scope as ES modules.
Instead rename index.umd.js to end in .cjs, change the requiring code to use import(), or remove “type”: “module” from /app/node_modules/@phosphor-icons/react/package.json.
    at new NodeError (internal/errors.js:322:7)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1131:13)
    at Module.load (internal/modules/cjs/loader.js:979:32)
    at Function.Module._load (internal/modules/cjs/loader.js:819:12)
    at Module.require (internal/modules/cjs/loader.js:1003:19)
    at require (internal/modules/cjs/helpers.js:107:18)
    at Object.<anonymous> (/app/node_modules/@docsity/ui-kit-icons/lib/cjs/index.js:7:17)
    at Module._compile (internal/modules/cjs/loader.js:1114:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1143:10)
    at Module.load (internal/modules/cjs/loader.js:979:32) {
  code: ‘ERR_REQUIRE_ESM’
}
error Command failed with exit code 1.

Reverting to 2.0.8 solved the problem but we are concerned about the impossibility to use the latest version of your library if we can't find a solution.

We are using:
yarn 1.22.19
react 17.0.2
typescript 4.3.2
lerna 4.0.0

[mountagency]

Can confirm this. Rolled back to 2.0.8.

[dolmios]

Interesting. 2.0.9 is my last working version, with 2.0.10 throwing that error.

unhandledRejection Error [ERR_REQUIRE_ESM]: require() of ES Module /app/node_modules/.pnpm/@phosphor-icons+react@2.0.10_react-dom@18.2.0_react@18.2.0/node_modules/@phosphor-icons/react/dist/index.umd.js not supported.

index.umd.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.

Instead rename index.umd.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in app/node_modules/.pnpm/@phosphor-icons+react@2.0.10_react-dom@18.2.0_react@18.2.0/node_modules/@phosphor-icons/react/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

[KenanYusuf]

I have just started seeing this error on v2.0.8 on a clean install of a project with @phosphor-icons/react

[BrandonFitzgibbon]

Just adding our voice that we rolled back to 2.0.9. This issue started in 2.0.10 after changes in PR #56.

[rektdeckard]

Hey all, I am assuming this is Node >= 18 (think) strategy for Determining modules system, and will be pushing an update where artifacts are emitted with .cjs and .mjs extensions, as opposed to .umd.js and .es.js. Will update here when live.

[rektdeckard]

OK all, added the exports.require fields in package.json and renamed all the artifacts. There is a build published on NPM at version 2.1.3, which can be installed under the tag @phosphor-icons/react@next. Please give this a try and let me know if it fixes things for you.

[rektdeckard]

Live in stable >=2.0.13. Marking as resolved.