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

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'
}

[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]

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