Unable to import

[macmichael01]

When I do:

const imagemin   = require('gulp-imagemin')

I get:

require() of ES modules is not supported.

When I do:

import imagemin from 'gulp-imagemin';

I get:

mport imagemin from 'gulp-imagemin';
^^^^^^
SyntaxError: Cannot use import statement outside a module

What is the correct way to import? Thanks!

[ashishsaini0194]

i was facing the same problem and issue solved by simply changing the version.

npm install --save-dev [email protected]

[MCStreetguy]

@macmichael01 You might want to read this gist about this exact problem mentioned in the release notes of v8.

As far as i understand it correctly you can either migrate your project to use pure ESM, allowing the now required import syntax, or otherwise stick to the older version, as already mentioned by @ashishsaini0194. But since apart from the switch to ESM no other changes have taken place so far, it should be no problem to continue using 7.1.0 for now, I think.

[macmichael01]

As I described neither ESM imports or the old require imports work. I also checked my node version (which is v14) to see if I am on the version of node that supports ESM imports (which is node v12). Anyone else having this issue? For now, I will continue using v7.

[Louboutin1017]

i was facing the same problem and issue solved by simply changing the version.

npm install --save-dev [email protected]

Thanks for saving me the frustrations. Hope the dev fixes the issue.

[querkmachine]

This change feels like a premature step. Gulp currently does not, by default, support ESM without the additional of extra dependencies, and asking people to migrate their entire Gulp configuration to support a single plugin is a pretty big (and somewhat developer-hostile) ask.

It doesn't feel like too much to ask that a Gulp plugin be compatible with out-of-the-box Gulp.

[Rush]

o ESM no other changes have taken place so far, it should be no problem to continue using 7.1.0 for now, I think.

Not true, the dependency tree for 7.1.0 shows older svgo (1.3.2) whereas 8.0.0 uses 2.8.0. Unfortunately 8.0.0 is completely unusable due to ESM being a requirement. It's not a very user friendly change. Couldn't you compile a cjs file and push into dist?

[michalmatuska]

Hi all, I solved this issue in easy way. You can use dynamic import() to fix it. After update to version 8 I changed this code

const { src, dest } = require('gulp');
const gulpImagemin = require('gulp-imagemin');

const config = require('./helpers/getConfig.js');

module.exports = function imagemin() {
	return src(['**/*.{png,jpg,gif,svg}', '!bg/icons-svg.svg'], {
		cwd: config.dest.images,
	})
		.pipe(
			gulpImagemin([
				gulpImagemin.jpegtran({ progressive: true }),
				gulpImagemin.optipng(),
				gulpImagemin.gifsicle(),
				gulpImagemin.svgo({
					plugins: [
						{
							removeViewBox: false,
						},
					],
				}),
			]),
		)
		.pipe(dest(config.dest.images));
};

to

const { src, dest } = require('gulp');
const config = require('./helpers/getConfig.js');

module.exports = function imagemin() {
	return import('gulp-imagemin').then((gulpImagemin) => {
		src(['**/*.{png,jpg,gif,svg}', '!bg/icons-svg.svg'], {
			cwd: config.dest.images,
		})
			.pipe(
				gulpImagemin.default([
					gulpImagemin.mozjpeg({ progressive: true }),
					gulpImagemin.optipng(),
					gulpImagemin.gifsicle(),
					gulpImagemin.svgo(),
				]),
			)
			.pipe(dest(config.dest.images));
	});
};

[acarnwath]

I ran into the same issue that @michalmatuska did, and the dynamic import did the trick, but I also wanted to point out that removing the plugins for svgo was also a change that I needed to make - for some reason with plugins provided, it would skip over the next pipe (i.e. moving the files to their destination), but was not outputting any errors. It does not appear to be limited to removeViewBox either, cleanupIDs behaved the same way for me when I swapped that in.

[picard102]

Hi all, I solved this issue in easy way. You can use dynamic import() to fix it. After update to version 8 I changed this code

const { src, dest } = require('gulp');
const gulpImagemin = require('gulp-imagemin');

const config = require('./helpers/getConfig.js');

module.exports = function imagemin() {
	return src(['**/*.{png,jpg,gif,svg}', '!bg/icons-svg.svg'], {
		cwd: config.dest.images,
	})
		.pipe(
			gulpImagemin([
				gulpImagemin.jpegtran({ progressive: true }),
				gulpImagemin.optipng(),
				gulpImagemin.gifsicle(),
				gulpImagemin.svgo({
					plugins: [
						{
							removeViewBox: false,
						},
					],
				}),
			]),
		)
		.pipe(dest(config.dest.images));
};

to

const { src, dest } = require('gulp');
const config = require('./helpers/getConfig.js');

module.exports = function imagemin() {
	return import('gulp-imagemin').then((gulpImagemin) => {
		src(['**/*.{png,jpg,gif,svg}', '!bg/icons-svg.svg'], {
			cwd: config.dest.images,
		})
			.pipe(
				gulpImagemin.default([
					gulpImagemin.mozjpeg({ progressive: true }),
					gulpImagemin.optipng(),
					gulpImagemin.gifsicle(),
					gulpImagemin.svgo(),
				]),
			)
			.pipe(dest(config.dest.images));
	});
};

I keep getting Task never defined errors on this.

[jheagle]

Good day, I have built a package inspired by these ES6 to CommonJS compatibility issues. Using gulp-imagemin as the test package I have created a PR which adds in a cjs subdirectory so that we can continue to use this lovely package in our latest gulp configurations.

Hopefully this goes well, otherwise for anyone interested in resolving this for their own purposes you can check out my package for common-exports.