require() of ES modules is not supported. #380

krishnaTORQUE · 2021-04-23T17:03:35Z

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

The text was updated successfully, but these errors were encountered:

krishnaTORQUE · 2021-04-23T17:14:33Z

I tried

const imagemin = require('imagemin');

import imagemin from 'imagemin';

import * as imagemin from 'imagemin';

import { imagemin } from 'imagemin';

None of those above worked

krishnaTORQUE · 2021-04-23T17:17:30Z

error log

require() of ES modules is not supported.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from node_modules/imagemin/package.json.

houzigou · 2021-04-25T03:40:07Z

Go back to the 7.0.1 version

krishnaTORQUE · 2021-04-25T07:19:51Z

Yes this is what I did for now. So there will be no support for typescript in future ?

daorren · 2021-05-13T10:35:27Z

same for javascript here
Node version: 14.16.0

jrmyio · 2021-05-13T18:10:05Z

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

Downgrading to ^7.0.1 again works.

fiznool · 2021-05-17T09:42:36Z

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

MihaelN · 2021-06-21T17:26:33Z

This is still an issue, even reverting back to ^7.0.1 still causes this issue.

import imagemin from 'imagemin'
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:1001:16)
    at Module._compile (internal/modules/cjs/loader.js:1049:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)
    at internal/main/run_main_module.js:17:47

npm -v
6.14.13

 node -v
v14.17.1

benjaminboruff · 2021-06-21T23:36:59Z

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.

krishnaTORQUE · 2021-06-22T06:30:43Z

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.

MihaelN · 2021-06-22T10:21:11Z

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 👍

benjaminboruff · 2021-06-22T14:36:40Z

@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!

krishnaTORQUE · 2021-06-22T14:49:52Z

@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.

benjaminboruff · 2021-06-22T15:15:26Z

@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!

TomoyaKuroda · 2021-08-06T15:04:39Z

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

krishnaTORQUE · 2021-08-06T19:57:43Z

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 · 2021-08-11T18:22:09Z

This issue has not been solved in v8.0.1

duan602728596 · 2021-08-13T06:21:48Z

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

krishnaTORQUE · 2021-08-13T16:39:12Z

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

Ref imagemin/imagemin#380

KulaGGin · 2021-09-16T18:01:49Z

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

Jax-p · 2021-12-10T09:32:17Z

Awesome. That resolved the issue in typescript too

Not for me. It just postponed error until the dynamic import. Last working version for me is still 7.X.

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

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

KulaGGin · 2021-12-10T10:58:48Z

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:

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

fiznool · 2021-12-10T11:18:10Z

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

stephengardner · 2023-03-11T09:53:25Z

2023 here - going back to version 7.0.1 works. Cheers

AshotAleqsanyan96 · 2023-04-22T21:47:34Z

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

This solution works for me. Thank you very mich!!!

danielstgt mentioned this issue Jul 19, 2021

Issues with Laravel Mix 6.0.20 and above? danielstgt/laravel-mix-svg-vue#8

Closed

krishnaTORQUE closed this as completed Aug 13, 2021

takuti added a commit to takuti/takuti.me that referenced this issue Aug 29, 2021

Fix latest imagemin load issue

c2daba1

Ref imagemin/imagemin#380

kkarpieszuk mentioned this issue Dec 20, 2022

Bump nth-check and gulp-imagemin awesomemotive/file-upload-types#60

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

require() of ES modules is not supported. #380

require() of ES modules is not supported. #380

krishnaTORQUE commented Apr 23, 2021

krishnaTORQUE commented Apr 23, 2021

krishnaTORQUE commented Apr 23, 2021

houzigou commented Apr 25, 2021

krishnaTORQUE commented Apr 25, 2021

daorren commented May 13, 2021

jrmyio commented May 13, 2021

fiznool commented May 17, 2021

MihaelN commented Jun 21, 2021

benjaminboruff commented Jun 21, 2021 •

edited

Loading

krishnaTORQUE commented Jun 22, 2021

MihaelN commented Jun 22, 2021

benjaminboruff commented Jun 22, 2021

krishnaTORQUE commented Jun 22, 2021

benjaminboruff commented Jun 22, 2021

TomoyaKuroda commented Aug 6, 2021

krishnaTORQUE commented Aug 6, 2021

krishnaTORQUE commented Aug 11, 2021

duan602728596 commented Aug 13, 2021

krishnaTORQUE commented Aug 13, 2021 •

edited

Loading

KulaGGin commented Sep 16, 2021

Jax-p commented Dec 10, 2021

KulaGGin commented Dec 10, 2021 •

edited

Loading

fiznool commented Dec 10, 2021

stephengardner commented Mar 11, 2023

AshotAleqsanyan96 commented Apr 22, 2023

require() of ES modules is not supported. #380

require() of ES modules is not supported. #380

Comments

krishnaTORQUE commented Apr 23, 2021

krishnaTORQUE commented Apr 23, 2021

krishnaTORQUE commented Apr 23, 2021

houzigou commented Apr 25, 2021

krishnaTORQUE commented Apr 25, 2021

daorren commented May 13, 2021

jrmyio commented May 13, 2021

fiznool commented May 17, 2021

MihaelN commented Jun 21, 2021

benjaminboruff commented Jun 21, 2021 • edited Loading

krishnaTORQUE commented Jun 22, 2021

MihaelN commented Jun 22, 2021

benjaminboruff commented Jun 22, 2021

krishnaTORQUE commented Jun 22, 2021

benjaminboruff commented Jun 22, 2021

TomoyaKuroda commented Aug 6, 2021

krishnaTORQUE commented Aug 6, 2021

krishnaTORQUE commented Aug 11, 2021

duan602728596 commented Aug 13, 2021

krishnaTORQUE commented Aug 13, 2021 • edited Loading

KulaGGin commented Sep 16, 2021

Jax-p commented Dec 10, 2021

KulaGGin commented Dec 10, 2021 • edited Loading

fiznool commented Dec 10, 2021

stephengardner commented Mar 11, 2023

AshotAleqsanyan96 commented Apr 22, 2023

benjaminboruff commented Jun 21, 2021 •

edited

Loading

krishnaTORQUE commented Aug 13, 2021 •

edited

Loading

KulaGGin commented Dec 10, 2021 •

edited

Loading