Dependency Iconify v.1.2 breaks build - Error [ERR_REQUIRE_ESM]: Must use import to load ES Module

[gameatrix]

It seems the iconify package version 1.2 breaks our build when using this package. It stopped working over the weekend and we were unable to build it with next build. We used this packaged for about a year without any problems. We tried switching node versions, versions of this package and a lot of other related packages but the it seems the culprit was the @iconify/icons-mdi : version "1.2.0". When we forced this package to use an older version, 1.1.37 in our case, everything worked as it should. Don't know if this is a bug or a special case only applicable to our environment. But i'll put it here anyway if someone else is having the same issue. Don't really know if this is the best solution either, but it solved our issue

Add this in your package.json (we are using yarn, dont know how this will work with npm)

 "resolutions": {  
    "react-h5-audio-player/@iconify/icons-mdi": "1.1.37"
  }

> Build error occurred
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/ubuntu/frontend/node_modules/@iconify/icons-mdi/play-circle.js
require() of ES modules is not supported.
require() of /home/ubuntu/frontend/node_modules/@iconify/icons-mdi/play-circle.js from /home/ubuntu/frontend/node_modules/node_modules/react-h5-audio-player/lib/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 play-circle.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /home/ubuntu/frontend/node_modules/@iconify/icons-mdi/package.json.

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1089:13)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Module.require (internal/modules/cjs/loader.js:961:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at Object.<anonymous> (/home/ubuntu/frontend/node_modules/react-h5-audio-player/lib/index.js:36:42)
    at Module._compile (internal/modules/cjs/loader.js:1072:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Module.require (internal/modules/cjs/loader.js:961:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at Object.23v/ (/home/ubuntu/tfrontend/.next/server/pages/_app.js:1273:18)
    at __webpack_require__ (/home/ubuntu/frontend/.next/server/pages/_app.js:29:31)
    at Module.1TCz (/home/ubuntu/frontend/.next/server/pages/_app.js:793:39)
    at __webpack_require__ (/home/ubuntu/frontend/.next/server/pages/_app.js:29:31) {
  code: 'ERR_REQUIRE_ESM'
}

[JohanRonstrom]

Also have a problem with @iconify:

ERROR in ./node_modules/@iconify/react/dist/iconify.mjs
Module parse failed: Unexpected token (15:11)
You may need an appropriate loader to handle this file type.
| });
| function fullIcon$1(data) {
|   return { ...iconDefaults$1, ...data };
| }
|
 @ ./node_modules/react-h5-audio-player/es/index.js 14:0-38

[lhz516]

Thanks for pointing this out. I couldn't find the release notes for @iconify/icons-mdi everywhere. I assume that 1.2 has some breaking changes. Let me just pin the version to 1.1.x to resolve the build issue.

[lhz516]

Published 3.8.3. Please try it out.

[theDanielJLewis]

Funny thing. 3.8.3 breaks my project, but 3.8.2 works fine.

ERROR in ./node_modules/@iconify/react/dist/iconify.mjs 99:21
Module parse failed: Unexpected token (99:21)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|       return null;
|     }
>     if (data.aliases?.[name2] !== void 0) {
|       const item = data.aliases?.[name2];
|       const result2 = getIcon(item.parent, iteration + 1);
 @ ./node_modules/react-h5-audio-player/es/index.js 14:0-38 325:87-91 329:85-89 342:81-85 349:77-81 361:79-83 368:73-77 385:83-87 389:89-93 412:89-93 416:93-97

[lhz516]

@theDanielJLewis Probably due to webpack/babel settings. I can look into it if you provide more details or a minimal reproducible repo.

[theDanielJLewis]

You're right. It was actually probably because I was still on Webpack 4.x. After I was able to upgrade to 5.x, I could update to 3.8.3.

[mrganser]

@lhz516 I saw this: https://github.com/iconify/iconify/issues/126, so same version pin could be applied to the react one like if you are interested:

"@iconify/react": "~3.1.3"

If not, same build error will happen with old tooling.

[lhz516]

@mrganser We might not need to pin that version. I believe @babel/preset-env does the transform for you.

[mrganser]

Yup, in any case, just for the record, it seems they published a new version for avoid crashing projects with old tooling: https://github.com/iconify/iconify/issues/126#issuecomment-1084476654