imagemin: require() of ES modules is not supported.

After update to latest version I got this error require() of ES modules is not supported. I am using typescript

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 33
  • Comments: 25

Commits related to this issue

Most upvoted comments

Go back to the 7.0.1 version

I tried

const imagemin = require('imagemin');

import imagemin from 'imagemin';

import * as imagemin from 'imagemin';

import { imagemin } from 'imagemin';

None of those above worked

Same issue, tested multiple node versions , none is working.

Downgrading to ^7.0.1 again works.

Because the imagemin 8 version is now pure ESM. If you want to use it in the commonjs module system, you need to load it in the following way:

const imageminJpegtran = require('imagemin-jpegtran');

async function main() {
  const imagemin = (await import('imagemin')).default;
  const files = await imagemin(['images/*.{jpg,png}'], {
    destination: 'build/images',
    plugins: [imageminJpegtran()]
  });
}

main();

About pure ESM package

Going back to ^7.0.1 using const imagemin = require('imagemin'); worked for me.

That kinda sucks. There aren’t many good alternatives out there for programmatic image processing. This repo is now unmaintained, and the (former) author recommends squoosh , but that is ESM, too. 😦

Don’t get me wrong, I think ESM is the way to go, but for many projects it will require (ha, ha) a lot of work. I use eleventy and while ESM is listed as an issue, it won’t be dealt with anytime soon. For now, it seems like it will be a safer bet to just use CLIs to process images, then copy them to where they need to go before deploying. Sheesh.

Go back to the 7.0.1 version

Thanks. It’s 7.1.0, though. There is no 7.0.1 version(in npm at least): phpstorm64_gnmevugPt1

Because the imagemin 8 version is now pure ESM. If you want to use it in the commonjs module system, you need to load it in the following way:

const imageminJpegtran = require('imagemin-jpegtran');

async function main() {
  const imagemin = (await import('imagemin')).default;
  const files = await imagemin(['images/*.{jpg,png}'], {
    destination: 'build/images',
    plugins: [imageminJpegtran()]
  });
}

main();

About pure ESM package

Awesome. That resolved the issue in typescript too

Its still not working this way in typescript

// @ts-ignore
const imagemin: any = require('imagemin');

Error

Must use import to load ES Module
require() of ES modules is not supported.

@KulaGGin that npm information is for the gulp-imagemin package. This repo is for the imagemin package.

No it is not 7.1.0. It is 7.0.1. Last 4 versions on npm are: 8.0.1, 8.0.0, 7.0.1, 7.0.0

No, it’s not 7.0.1, it is 7.1.0. The info on the site is irrelevant(and wrong in this case, too), it’s not part of the actual package manager, it’s just a website. Apparently, looks like they have wrong info on their website, which is not to be confused with actual package manager: npm. You cannot download imagemin of version 7.0.1 from npm, as I shown above on the screenshot. When you enter what versions are available, there is no 7.0.1: cmd_IwFyxicaJd

And you can’t download it either, you’ll get the error.

I don’t know if you guys figured out the solution, but I just changed the file extension from js to mjs and replace the require with import, and then everything works fine with version 8. So something like this.

webp.mjs

import imagemin from 'imagemin';
import imageminWebp from "imagemin-webp";

imagemin(["./images/*.{jpg,png}"], {
	destination: "./images/webp/",
	plugins: [
		imageminWebp({
			//   quality: 90
			//   ,
			//   resize: {
			//     width: 1000,
			//     height: 0
			//   }
		}),
	],
}).then(() => {
	console.log("Images Converted Successfully!!!");
});

and run node .\webp.mjs

Your solution won’t work in Typescript

@krishnaTORQUE sorry, I should have specified … I am using node 16.3.0 so this is just at the command-line (linux ubuntu) and I use it in a static site generator on my laptop.

But, yeah, sadly I think we all need to find a different package 😦 Good luck!

@benjaminboruff thank you for your reply. I am very much unsure about it. But I tried with v8 if you are talking about v7 then yes its working like this way.

@krishnaTORQUE I was able to get it to compile in ts like so:

package.json


"devDependencies": {
    "typescript": "^4.3.4",
    "imagemin": "^7.0.1"
  }

src/main.ts

// @ts-ignore
const imagemin: any = require('imagemin');

then compile npx ts src/main.ts, and the compiled dist/main.js is

"use strict";
// @ts-ignore
var imagemin = require('imagemin');

So I’m not sure why it doesn’t work for you! Sorry!

Going back to ^7.0.1 using const imagemin = require('imagemin'); worked for me.

That kinda sucks. There aren’t many good alternatives out there for programmatic image processing. This repo is now unmaintained, and the (former) author recommends squoosh , but that is ESM, too. 😦

Don’t get me wrong, I think ESM is the way to go, but for many projects it will require (ha, ha) a lot of work. I use eleventy and while ESM is listed as an issue, it won’t be dealt with anytime soon. For now, it seems like it will be a safer bet to just use CLIs to process images, then copy them to where they need to go before deploying. Sheesh.

I am working on migrating over to @squosh/cli, for the time being I will have to revert back to require + v7.0.1, thanks 👍