Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\xampp\htdocs\gulp-set-up\node_modules\gulp-imagemin\index.js

[ptendec]

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\xampp\htdocs\gulp-set-up\node_modules\gulp-imagemin\index.js require() of ES modules is not supported. require() of C:\xampp\htdocs\gulp-set-up\node_modules\gulp-imagemin\index.js from C:\xampp\htdocs\gulp-set-up\gulpfile.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defi nes 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 C:\xampp\htdocs\gulp-set-up\node_modules\gulp-imagemin\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> (C:\xampp\htdocs\gulp-set-up\gulpfile.js:8:18)
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) {

code: 'ERR_REQUIRE_ESM'

[ObieSilva]

I'm having the same issue! Anyone know what can be done?

[kiorion]

I have the same problem

[onza]

same problem

[IhorKryvenko]

I have this problem but I couldn't find a solution. I using previous version npm i gulp-imagemin@7.1.0

[Shurafan]

This is a bad decision.

[darkDepthDeep]

Решение нашлось этой проблемы?

[munzi1989]

Node Version: 14.17.6 CLI version: 2.3.0 Local version: 4.0.2 "devDependencies": { "@babel/core": "^7.15.5", "@babel/preset-env": "^7.15.4", "@babel/register": "^7.15.3", "babel-core": "^6.14.0", "gulp": "^4.0.2", "gulp-clean-css": "^4.3.0", "gulp-if": "^3.0.0", "gulp-imagemin": "^8.0.0", "gulp-sass": "^5.0.0", "gulp-sourcemaps": "^3.0.0", "sass": "^1.39.0", "yargs": "^7.1.2" }

Same issue here. Can't find resources elsewhere to fix.

[IvanMartil]

I have the same problem

[gwicksted]

There are a few issues:

1. the ES modules emit a default export but the type notations do not specify that (except imagemin-pngquant but is has had a default export prior to ES modularization).
2. you need to asynchronously import ES modules using the import() statement if you wish to use them within commonjs
3. you cannot switch gulp to run within an ES module environment and still use the gulp-cli (not even with .esm.js or .jsm or .cjs by using the package.json "type": "module" specifier)

Here is how to fix your gulpfile.js (provided with type notations and ignores due to the current mix-up between type notations and actual implementation)

let /** @type {import("gulp-imagemin")} */ imagemin;
let /** @type {import("imagemin-jpegtran")} */ imageminJpegtran;
let /** @type {import("imagemin-pngquant").default} */ imageminPngquant;

const startup = async () => {
    // @ts-ignore
    imagemin = (await import("gulp-imagemin")).default;
    // @ts-ignore
    imageminJpegtran = (await import("imagemin-jpegtran")).default;
    imageminPngquant = (await import("imagemin-pngquant")).default;
};

// run this task before any that require imagemin
gulp.task("startup", async () => {
    await startup();
});

[Samrux1552]

I had the same problem. In gulpfile.js I changed

const imagemin = require('gulp-imagemin');

to

const imagemin = import('gulp-imagemin')

[hritikkhurana10sm]

I also faced this following issue while working on some project.

Earlier I did , npm install gulp-imagemin to install gulp-imagemin , but it gives me error.

After I did reinstall , npm i gulp-imagemin to install gulp-imagemin , and it works fine

[denmercs]

The solution, for now, is just to downgrade the version. I am currently running 7.1.0, my guess is.. anything lower v8 is fine.

"gulp-imagemin": "^7.1.0",

[divyans-GitHub]

There are a few issues:

1. the ES modules emit a default export but the type notations do not specify that (except imagemin-pngquant but is has had a default export prior to ES modularization).
2. you need to asynchronously import ES modules using the import() statement if you wish to use them within commonjs
3. you cannot switch gulp to run within an ES module environment and still use the gulp-cli (not even with .esm.js or .jsm or .cjs by using the package.json "type": "module" specifier)

Here is how to fix your gulpfile.js (provided with type notations and ignores due to the current mix-up between type notations and actual implementation)

let /** @type {import("gulp-imagemin")} */ imagemin;
let /** @type {import("imagemin-jpegtran")} */ imageminJpegtran;
let /** @type {import("imagemin-pngquant").default} */ imageminPngquant;

const startup = async () => {
    // @ts-ignore
    imagemin = (await import("gulp-imagemin")).default;
    // @ts-ignore
    imageminJpegtran = (await import("imagemin-jpegtran")).default;
    imageminPngquant = (await import("imagemin-pngquant")).default;
};

// run this task before any that require imagemin
gulp.task("startup", async () => {
    await startup();
});

"worked fine for me" THANKS SIR 🥇

[gyh9457]

set the suffix to '.mjs'

[Nanzet]

import

TypeError: imagemin is not a function at D:\BLOG\gulpfile.js:143:15 at compressImage (D:\BLOG\node_modules\undertaker\lib\set-task.js:13:15) at bound (domain.js:427:14) at runBound (domain.js:440:12) at asyncRunner (D:\BLOG\node_modules\async-done\index.js:55:18) at processTicksAndRejections (internal/process/task_queues.js:79:11)

[mdhasanpatwary]

I'm having the same issue!

[mariovalney]

You can use a dynamic import in gulpfile.

For example:

async function images_to_dist() {
  const imagemin = await import('gulp-imagemin');
  const imagePlugins = [
    imagemin.svgo({
      plugins: [
        {
          removeViewBox: false
        }
      ]
    })
  ];

  return gulp.src(theme_source_dir + 'img/**/*')
             .pipe(imagemin.default(imagePlugins))
             .pipe(gulp.dest(theme_dir + 'img'));
}

[Tofandel]

Same problem; if you're gonna switch to ESM at least have the decency to provide a transpiled version 😞

[meacodes]

I have this problem but I couldn't find a solution. I using previous version npm i gulp-imagemin@7.1.0

i try this to but its not work to

[meacodes]

i'll try with this :

const imagemin = import('gulp-imagemin') const paths = { images: { src: 'src/assets/images/**/*.{jpg,jpeg,png,svg,gif}', dest: 'dist/assets/images' } }

export const images = () => { return gulp .src(paths.images.src) .pipe(gulpif(PRODUCTION, imagemin())) .pipe(gulp.dest(paths.images.dest)); }

and i see this type of error in terminal:

mehdi@pop-os:~/Work/Meacodes/Mea template/meap$ gulp images --prod [23:53:13] Requiring external module @babel/register [23:53:14] Using gulpfile ~/Work/Meacodes/Mea template/meap/gulpfile.babel.js [23:53:14] Starting 'images'... [23:53:14] 'images' errored after 15 ms [23:53:14] TypeError: imagemin is not a function at images (/home/mehdi/Work/Meacodes/Mea template/meap/gulpfile.babel.js:32:30) at images (/home/mehdi/Work/Meacodes/Mea template/meap/node_modules/undertaker/lib/set-task.js:13:15) at bound (domain.js:427:14) at runBound (domain.js:440:12) at asyncRunner (/home/mehdi/Work/Meacodes/Mea template/meap/node_modules/async-done/index.js:55:18) at processTicksAndRejections (internal/process/task_queues.js:79:11)

and when i'll try with this:

import imagemin from 'gulp-imagemin';

i see this error:

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/mehdi/Work/Meacodes/Mea template/meap/node_modules/gulp-imagemin/index.js require() of ES modules is not supported. require() of /home/mehdi/Work/Meacodes/Mea template/meap/node_modules/gulp-imagemin/index.js from . . . .

code: 'ERR_REQUIRE_ESM'

[Artefilex]

Just install previous version " npm i gulp-imagemin@7.1.0 "

[sindresorhus]

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