Error [ERR_REQUIRE_ESM]: Must use import to load ES Module

[metapodcod]

version :

node --version
v14.18.2 
npm --version 
8.3.0
"imagemin-webp": "^7.0.0""

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/metapodcod/Project/ecommerce/node_modules/imagemin-webp/index.js
require() of ES modules is not supported.
require() of /home/metapodcod/Project/ecommerce/node_modules/imagemin-webp/index.js from /home/metapodcod/Project/ecommerce/gulpfile.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.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /home/metapodcod/Project/ecommerce/node_modules/imagemin-webp/package.json.

    at new NodeError (internal/errors.js:322:7)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1102:13)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:93:18)
    at Object.<anonymous> (/home/metapodcod/Project/ecommerce/gulpfile.js:21:22)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32) {
  code: 'ERR_REQUIRE_ESM'
}

[yvog]

I had this issue too, because I was running the script from a CommonJS node context. imagemin-webp uses the ESM module context. Read more here.

My solution is to use imagemin@^7.0.1 in combination with imagemin-webp@^6.0.0

[metapodcod]

I had this issue too, because I was running the script from a CommonJS node context. imagemin-webp uses the ESM module context. Read more here.

My solution is to use imagemin@^7.0.1 in combination with imagemin-webp@^6.0.0

Firstly, thank you for your reply . Does this mean we can't use the latest version ? Shouldn't the "ESM" conversion be done by the owner of the package? because as an end user, I can't do such detailed operations, I just use this package to optimize my images. English is not my native language, I hope I'm not misunderstood

[yvog]

It's possible to use the latest version:

• in an ESM module context (by changing your project to use ESM modules)
• or by dynamically importing the package in a CommonJS context
• but the preferred method is using the tool from a .mjs node script

More information here.

Most libraries however offer different contexts to use, I believe..

[llccrr]

Heelo, I am currently trying to upgrade every imagemin plugin used in my project to be compatible with new Mac M1 ship.
I upgraded NodeJS to 17.6 + every imagemin plugins.
Everything seems to work fine except for imagemin-webp

I am currently importing imagemin-webp as follow :
const imageminWebp = (await import('imagemin-webp')).default;

I tried to import it using classic import or require, it's not working either.

When I try to use the v6.0.0 I am having another error :

Do you have any idea ?

[Tofandel]

A commonjs should always be provided for a nodejs lib, there is 0 reason to bundle only esm because it makes it unusable for 90% of cases

Please consider adding a babel transpiling step

[sindresorhus]

https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c