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

[Mount]

Can confirm this. Rolled back to 2.0.8.

[Jackson Dolman]

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).

[Kenan Yusuf]

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

[Brandon Fitzgibbon]

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