webpack-contrib/image-minimizer-webpack-plugin

this webpack plugin should use ESM, or indicate incompatibility with ESM

lizthegrey opened this issue · 2 comments

Modification Proposal

https://github.com/imagemin/imagemin-svgo/releases/tag/v10.0.0 requires all modules that import it to support ESM; while v9.0.0 continues to work fine, there should be something added to indicate that imagemin-svgo should not be upgraded until this package is upgraded to ESM as well.

Expected Behavior / Situation

SVG packing and optimization should happen correctly with imagemin-svgo.

Actual Behavior / Situation

Warnings and failed svg packing, because an ESM module cannot be loaded with require() from a cjs module.

WARNING in ./src/client/shared/res/LoadingSpinner-spinner.svg
Module Warning (from ./node_modules/image-minimizer-webpack-plugin/dist/loader.js):
Unknown plugin: imagemin-svgo

Did you forget to install the plugin?
You can install it with:

$ npm install imagemin-svgo --save-dev
$ yarn add imagemin-svgo --dev
 @ ./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[1]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[7].use[0]!./src/client/shared/LoadingSpinner.vue?vue&type=template&id=440c8cdd&scoped=true 2:0-57 27:21-31
 @ ./src/client/shared/LoadingSpinner.vue?vue&type=template&id=440c8cdd&scoped=true 1:0-232 1:0-232
 @ ./src/client/shared/LoadingSpinner.vue 1:0-87 6:16-22
 @ ./node_modules/ts-loader/index.js??clonedRuleSet-1!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[7].use[0]!./src/client/admin/AccountLog.vue?vue&type=script&lang=ts
 @ ./src/client/admin/AccountLog.vue?vue&type=script&lang=ts 1:0-202 1:0-202 1:203-394 1:203-394
 @ ./src/client/admin/AccountLog.vue 2:0-61 3:0-56 3:0-56 6:0-13 7:0-16 9:15-21
 @ ./src/client/home.ts

Please paste the results of npx webpack-cli info here, and mention other relevant information

yarn webpack-cli info
yarn run v1.22.5
$ /home/lizf/eve-roster/node_modules/.bin/webpack-cli info

  System:
    OS: Linux 5.11 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (12) x64 AMD Ryzen 5 5600X 6-Core Processor
    Memory: 1.27 GB / 31.29 GB
  Binaries:
    Node: 14.17.6 - /tmp/yarn--1632200084282-0.1678014881235168/node
    Yarn: 1.22.5 - /tmp/yarn--1632200084282-0.1678014881235168/yarn
  Browsers:
    Chrome: beta
    Firefox: 92.0
  Packages:
    clean-webpack-plugin: ^4.0.0 => 4.0.0 
    css-minimizer-webpack-plugin: ^3.0.2 => 3.0.2 
    html-webpack-plugin: ^5.3.2 => 5.3.2 
    html-webpack-pug-plugin: ^3.0.0 => 3.0.0 
    image-minimizer-webpack-plugin: ^2.2.0 => 2.2.0 
    moment-locales-webpack-plugin: ^1.2.0 => 1.2.0 
    terser-webpack-plugin: ^5.2.4 => 5.2.4 
    webpack: ^5.37.1 => 5.38.1 
    webpack-cli: ^4.8.0 => 4.8.0 
    webpack-dev-middleware: ^5.1.0 => 5.1.0 
    webpack-hot-middleware: webpack-contrib/webpack-hot-middleware#webpack5 => 2.25.0 
    webpack-merge: ^5.8.0 => 5.8.0 

Done in 0.36s.

We can migrate on import()

For people who are still getting the Unknown plugin error, even after upgrading and installing all needed packages, try to upgrade your webpack-cli dependency. This finally did it for me.

After catching the original error TypeError: Invalid host defined options it led me to this similar issue mentioned here.