search

juliomrqz / nuxt-optimized-images

🌅🚀 Automatically optimizes images used in Nuxt.js projects (JPEG, PNG, SVG, WebP and GIF).
https://marquez.co/docs/nuxt-optimized-images/
MIT License
842 stars 30 forks source link

ERROR require() of ES Module imagemin-svgo not supported #343

Open mklueh opened 2 years ago

mklueh commented 2 years ago

Hello, I'm running into this error when trying to use the library.

 ERROR  require() of ES Module /home/user/workspace/my-app/node_modules/imagemin-svgo/index.js from /home/user/workspace/my-app/node_modules/@aceforth/nuxt-optimized-images/lib/loaders/img-loader.js not supported.
Instead change the require of index.js in /home/user/workspace/my-app/node_modules/@aceforth/nuxt-optimized-images/lib/loaders/img-loader.js to a dynamic import() which is available in all CommonJS modules.

  Instead change the require of index.js in /home/user/workspace/my-app/node_modules/@aceforth/nuxt-optimized-images/lib/loaders/img-loader.js to a dynamic import() which is available in all CommonJS modules.
  at requireImageminPlugin (/home/user/workspace/my-app/node_modules/@aceforth/nuxt-optimized-images/lib/loaders/img-loader.js:20:10)
  at getImgLoaderOptions (/home/user/workspace/my-app/node_modules/@aceforth/nuxt-optimized-images/lib/loaders/img-loader.js:49:11)
  at applyImgLoader (/home/user/workspace/my-app/node_modules/@aceforth/nuxt-optimized-images/lib/loaders/img-loader.js:93:28)
  at appendLoaders (/home/user/workspace/my-app/node_modules/@aceforth/nuxt-optimized-images/lib/loaders/index.js:134:14)
  at WebpackBundler.<anonymous> (/home/user/workspace/my-app/node_modules/@aceforth/nuxt-optimized-images/lib/index.js:62:16)
  at next (/home/user/workspace/my-app/node_modules/@nuxt/utils/dist/utils.js:659:27)
  at WebpackBundler.<anonymous> (/home/user/workspace/my-app/node_modules/@nuxt/utils/dist/utils.js:674:12)
  at WebpackClientConfig.extendConfig (/home/user/workspace/my-app/node_modules/@nuxt/webpack/dist/webpack.js:1509:37)
  at WebpackClientConfig.config (/home/user/workspace/my-app/node_modules/@nuxt/webpack/dist/webpack.js:1544:50)
  at WebpackClientConfig.config (/home/user/workspace/my-app/node_modules/@nuxt/webpack/dist/webpack.js:1708:26)
  at WebpackBundler.getWebpackConfig (/home/user/workspace/my-app/node_modules/@nuxt/webpack/dist/webpack.js:2016:19)
  at WebpackBundler.build (/home/user/workspace/my-app/node_modules/@nuxt/webpack/dist/webpack.js:2023:12)
  at Builder.build (/home/user/workspace/my-app/node_modules/@nuxt/builder/dist/builder.js:327:30)
  at async Object._buildDev (/home/user/workspace/my-app/node_modules/@nuxt/cli/dist/cli-dev.js:107:5)
  at async Object.startDev (/home/user/workspace/my-app/node_modules/@nuxt/cli/dist/cli-dev.js:65:7)
  at async Object.run (/home/user/workspace/my-app/node_modules/@nuxt/cli/dist/cli-dev.js:52:5)
  at async NuxtCommand.run (/home/user/workspace/my-app/node_modules/@nuxt/cli/dist/cli-index.js:413:7)

I'm using Nuxt 2.15.7, together with Typescript.

What am I doing wrong?

ptdev commented 2 years ago

I'm also getting a similar issue with nuxt v2.15.8 and node v16.13.0 which is the following:

ERROR  require() of ES Module /(...)/node_modules/imagemin-mozjpeg/index.js from /(...)/node_modules/@aceforth/nuxt-optimized-images/lib/loaders/img-loader.js not supported.
Instead change the require of index.js in /(...)/node_modules/@aceforth/nuxt-optimized-images/lib/loaders/img-loader.js to a dynamic import() which is available in all CommonJS modules.

  Instead change the require of index.js in node_modules/@aceforth/nuxt-optimized-images/lib/loaders/img-loader.js to a dynamic import() which is available in all CommonJS modules.
  at requireImageminPlugin (node_modules/@aceforth/nuxt-optimized-images/lib/loaders/img-loader.js:20:10)
  at getImgLoaderOptions (node_modules/@aceforth/nuxt-optimized-images/lib/loaders/img-loader.js:41:11)
  at applyImgLoader (node_modules/@aceforth/nuxt-optimized-images/lib/loaders/img-loader.js:93:28)
  at appendLoaders (node_modules/@aceforth/nuxt-optimized-images/lib/loaders/index.js:134:14)
  at WebpackBundler.<anonymous> (node_modules/@aceforth/nuxt-optimized-images/lib/index.js:62:16)
  at next (node_modules/@nuxt/utils/dist/utils.js:659:27)
  at WebpackBundler.<anonymous> (node_modules/@nuxt/utils/dist/utils.js:674:12)
  at WebpackClientConfig.extendConfig (node_modules/@nuxt/webpack/dist/webpack.js:1509:37)
  at WebpackClientConfig.config (node_modules/@nuxt/webpack/dist/webpack.js:1544:50)
  at WebpackClientConfig.config (node_modules/@nuxt/webpack/dist/webpack.js:1708:26)
  at WebpackBundler.getWebpackConfig (node_modules/@nuxt/webpack/dist/webpack.js:2016:19)
  at WebpackBundler.build (node_modules/@nuxt/webpack/dist/webpack.js:2023:12)
  at Builder.build (node_modules/@nuxt/builder/dist/builder.js:327:30)
  at async Object._buildDev (node_modules/@nuxt/cli/dist/cli-dev.js:107:5)
  at async Object.startDev (node_modules/@nuxt/cli/dist/cli-dev.js:65:7)
  at async Object.run (node_modules/@nuxt/cli/dist/cli-dev.js:52:5)
  at async NuxtCommand.run (node_modules/@nuxt/cli/dist/cli-index.js:413:7)

It's most likely something to do with the newer node versions but just posting here anyways.

joriswvanrijn commented 2 years ago

I have the same issue.

Using node v16.13.1, npm 8.1.2

 ERROR  require() of ES Module xxx/node_modules/imagemin-mozjpeg/index.js from xxx/node_modules/@aceforth/nuxt-optimized-images/lib/loaders/img-loader.js not supported.
Instead change the require of index.js in xxx/node_modules/@aceforth/nuxt-optimized-images/lib/loaders/img-loader.js to a dynamic import() which is available in all CommonJS modules.

  Instead change the require of index.js in node_modules/@aceforth/nuxt-optimized-images/lib/loaders/img-loader.js to a dynamic import() which is available in all CommonJS modules.
  at requireImageminPlugin (node_modules/@aceforth/nuxt-optimized-images/lib/loaders/img-loader.js:20:10)
  at getImgLoaderOptions (node_modules/@aceforth/nuxt-optimized-images/lib/loaders/img-loader.js:41:11)
  at applyImgLoader (node_modules/@aceforth/nuxt-optimized-images/lib/loaders/img-loader.js:93:28)
  at appendLoaders (node_modules/@aceforth/nuxt-optimized-images/lib/loaders/index.js:134:14)
  at WebpackBundler.<anonymous> (node_modules/@aceforth/nuxt-optimized-images/lib/index.js:62:16)
  at next (node_modules/@nuxt/utils/dist/utils.js:659:27)
  at WebpackBundler.<anonymous> (node_modules/@nuxt/utils/dist/utils.js:674:12)
  at WebpackBundler.<anonymous> (node_modules/@nuxt/utils/dist/utils.js:668:29)
  at WebpackBundler.<anonymous> (node_modules/@nuxt/utils/dist/utils.js:668:29)
  at WebpackBundler.<anonymous> (node_modules/@nuxt/utils/dist/utils.js:668:29)
  at WebpackClientConfig.extendConfig (node_modules/@nuxt/webpack/dist/webpack.js:1509:37)
  at WebpackClientConfig.config (node_modules/@nuxt/webpack/dist/webpack.js:1544:50)
  at WebpackClientConfig.config (node_modules/@nuxt/webpack/dist/webpack.js:1708:26)
  at WebpackBundler.getWebpackConfig (node_modules/@nuxt/webpack/dist/webpack.js:2016:19)
  at WebpackBundler.build (node_modules/@nuxt/webpack/dist/webpack.js:2023:12)
  at Builder.build (node_modules/@nuxt/builder/dist/builder.js:327:30)
  at async Object.run (node_modules/@nuxt/cli/dist/cli-build.js:110:7)
  at async NuxtCommand.run (node_modules/@nuxt/cli/dist/cli-index.js:413:7)
iggyvanlith commented 2 years ago

Had the same issue after updating both imagemin-svgo and imagemin-mozjpeg to version 10. When I went back to version 9 this error disappeared. Not a fix obviously but at least the code works again.

Torgian commented 2 years ago

I would like to make a PR to update this. My own project is dependent on this, and we are in the process of updating our dependencies.

yordis commented 2 years ago

@Torgian did you manage to do it?