Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to import #366

Closed
macmichael01 opened this issue Oct 21, 2021 · 11 comments
Closed

Unable to import #366

macmichael01 opened this issue Oct 21, 2021 · 11 comments

Comments

@macmichael01
Copy link

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
Copy link

ashishsaini0194 commented Oct 24, 2021

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

npm install --save-dev gulp-imagemin@7.1.0

@MCStreetguy
Copy link

@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
Copy link
Author

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
Copy link

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

npm install --save-dev gulp-imagemin@7.1.0

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

@querkmachine
Copy link

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
Copy link

Rush commented Jan 28, 2022

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
Copy link

michalmatuska commented Feb 13, 2022

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
Copy link

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
Copy link

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
Copy link

jheagle commented Feb 15, 2024

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.

@sindresorhus
Copy link
Owner

@sindresorhus sindresorhus closed this as not planned Won't fix, can't repro, duplicate, stale May 5, 2024
Repository owner locked as resolved and limited conversation to collaborators May 5, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.