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

[Samrux1552]

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

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

to

const imagemin = import('gulp-imagemin')

[Shurafan]

This is a bad decision.

[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",

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

[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();
});

[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'));
}

[IhorKryvenko]

I have this problem but I couldn't find a solution.
I using previous version npm i [email protected]

[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

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

[darkDepthDeep]

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

[Artefilex]

Just install previous version " npm i [email protected] "

[ObieSilva]

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

[kiorion]

I have the same problem

[onza]

same problem

[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

[gyh9457]

set the suffix to '.mjs'

[mdhasanpatwary]

I'm having the same issue!

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

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'

[sindresorhus]

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