search

webpack-contrib / image-minimizer-webpack-plugin

Webpack loader and plugin to compress images using imagemin
MIT License
236 stars 38 forks source link

Cannot read property 'tapPromise' of undefined #177

Closed kopax closed 3 years ago

kopax commented 3 years ago

Expected Behavior

I expected to optimize my assets images when running npm run build.

Actual Behavior

Running npm run build produce the error: 

> react-app-rewired build

Creating an optimized production build...
Failed to compile.

Cannot read property 'tapPromise' of undefined

Code

// webpack.config.js
// If your code blocks are over 20 lines, please paste a link to a gist
// (https://gist.github.com).
// additional code, HEY YO remove this block if you don't need it

How Do We Reproduce?

Using create-react-app and react-app-rewired, this is what I did:

npm i --save-dev image-minimizer-webpack-plugin  imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo

In config-override.js:

const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');

module.exports = {
  webpack: (config, env) => {
    config.plugins = (config.plugins || []).concat([
      new ImageMinimizerPlugin({
        minimizerOptions: {
          // Lossless optimization with custom option
          // Feel free to experiment with options for better result for you
          plugins: [
            ['gifsicle', { interlaced: true }],
            ['jpegtran', { progressive: true }],
            ['optipng', { optimizationLevel: 5 }],
            [
              'svgo',
              {
                plugins: [
                  {
                    removeViewBox: false,
                  },
                ],
              },
            ],
          ],
        },
      }),
    ]);
  },
};
alexander-akait commented 3 years ago

Please read changelog file, latest version compatibility only with webpack@5, consider to update webpack@5

kopax commented 3 years ago

Hi and thanks for your reply. Which version is compatible with v4? I use create-react-app and react-app-rewired and the version used is v4.

alexander-akait commented 3 years ago

https://github.com/webpack-contrib/image-minimizer-webpack-plugin/tree/v1.0.0

kopax commented 3 years ago

Hi @alexander-akait and thanks for the precision. Sorry if I could have found that myself. I have tried to build my application and the produced directory for media assets shows little of no compression.

I use version 1.0.0, this is how I configured the plugins in react-app-rewired file config-overrides.js:

const { writeFileSync } = require('fs');
const { join } = require('path');
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');

module.exports = {
  webpack: (config, env) => {
    config.plugins = (config.plugins || []).concat([
      new ImageMinimizerPlugin({
        minimizerOptions: {
          // Lossless optimization with custom option
          // Feel free to experiment with options for better result for you
          plugins: [
            ['gifsicle', { interlaced: true }],
            ['jpegtran', { progressive: true }],
            ['optipng', { optimizationLevel: 5 }],
            [
              'svgo',
              {
                plugins: [
                  {
                    removeViewBox: false,
                  },
                ],
              },
            ],
          ],
        },
      }),
    ]);

    writeFileSync('test.json', JSON.stringify(config, null, 2));
    return config;
  },
};

The test.json with the saved webpack config looks like this:

{
  "mode": "production",
  "bail": true,
  "devtool": "source-map",
  "entry": "/home/dka/workspace/gitlab/www/src/index.js",
  "output": {
    "path": "/home/dka/workspace/gitlab/www/build",
    "pathinfo": false,
    "filename": "static/js/[name].[contenthash:8].js",
    "futureEmitAssets": true,
    "chunkFilename": "static/js/[name].[contenthash:8].chunk.js",
    "publicPath": "/",
    "jsonpFunction": "webpackJsonp@www",
    "globalObject": "this"
  },
  "optimization": {
    "minimize": true,
    "minimizer": [
      {
        "options": {
          "test": {},
          "extractComments": true,
          "sourceMap": true,
          "cache": true,
          "parallel": true,
          "terserOptions": {
            "parse": {
              "ecma": 8
            },
            "compress": {
              "ecma": 5,
              "warnings": false,
              "comparisons": false,
              "inline": 2
            },
            "mangle": {
              "safari10": true
            },
            "keep_classnames": false,
            "keep_fnames": false,
            "output": {
              "ecma": 5,
              "comments": false,
              "ascii_only": true
            }
          }
        }
      },
      {
        "pluginDescriptor": {
          "name": "OptimizeCssAssetsWebpackPlugin"
        },
        "options": {
          "assetProcessors": [
            {
              "phase": "compilation.optimize-chunk-assets",
              "regExp": {}
            }
          ],
          "assetNameRegExp": {},
          "cssProcessorOptions": {
            "map": {
              "inline": false,
              "annotation": true
            }
          },
          "cssProcessorPluginOptions": {
            "preset": [
              "default",
              {
                "minifyFontValues": {
                  "removeQuotes": false
                }
              }
            ]
          }
        },
        "phaseAssetProcessors": {
          "compilation.optimize-chunk-assets": [
            {
              "phase": "compilation.optimize-chunk-assets",
              "regExp": {}
            }
          ],
          "compilation.optimize-assets": [],
          "emit": []
        },
        "deleteAssetsMap": {}
      }
    ],
    "splitChunks": {
      "chunks": "all",
      "name": false
    },
    "runtimeChunk": {}
  },
  "resolve": {
    "modules": [
      "node_modules",
      "/home/dka/workspace/gitlab/www/node_modules"
    ],
    "extensions": [
      ".web.mjs",
      ".mjs",
      ".web.js",
      ".js",
      ".json",
      ".web.jsx",
      ".jsx"
    ],
    "plugins": [
      {
        "topLevelLoader": {}
      },
      {
        "appSrcs": [
          "/home/dka/workspace/gitlab/www/src"
        ],
        "allowedFiles": {}
      }
    ]
  },
  "resolveLoader": {
    "plugins": [
      {}
    ]
  },
  "module": {
    "strictExportPresence": true,
    "rules": [
      {
        "parser": {
          "requireEnsure": false
        }
      },
      {
        "oneOf": [
          {
            "test": [
              {}
            ],
            "loader": "/home/dka/workspace/gitlab/www/node_modules/react-scripts/node_modules/url-loader/dist/cjs.js",
            "options": {
              "limit": 10000,
              "mimetype": "image/avif",
              "name": "static/media/[name].[hash:8].[ext]"
            }
          },
          {
            "test": [
              {},
              {},
              {},
              {}
            ],
            "loader": "/home/dka/workspace/gitlab/www/node_modules/react-scripts/node_modules/url-loader/dist/cjs.js",
            "options": {
              "limit": 10000,
              "name": "static/media/[name].[hash:8].[ext]"
            }
          },
          {
            "test": {},
            "include": "/home/dka/workspace/gitlab/www/src",
            "loader": "/home/dka/workspace/gitlab/www/node_modules/react-scripts/node_modules/babel-loader/lib/index.js",
            "options": {
              "customize": "/home/dka/workspace/gitlab/www/node_modules/babel-preset-react-app/webpack-overrides.js",
              "presets": [
                [
                  "/home/dka/workspace/gitlab/www/node_modules/babel-preset-react-app/index.js",
                  {
                    "runtime": "classic"
                  }
                ]
              ],
              "babelrc": false,
              "configFile": false,
              "cacheIdentifier": "production:babel-plugin-named-asset-import@0.3.7:babel-preset-react-app@10.0.0:react-dev-utils@11.0.1:react-scripts@4.0.1",
              "plugins": [
                [
                  "/home/dka/workspace/gitlab/www/node_modules/babel-plugin-named-asset-import/index.js",
                  {
                    "loaderMap": {
                      "svg": {
                        "ReactComponent": "@svgr/webpack?-svgo,+titleProp,+ref![path]"
                      }
                    }
                  }
                ]
              ],
              "cacheDirectory": true,
              "cacheCompression": false,
              "compact": true
            }
          },
          {
            "test": {},
            "exclude": {},
            "loader": "/home/dka/workspace/gitlab/www/node_modules/react-scripts/node_modules/babel-loader/lib/index.js",
            "options": {
              "babelrc": false,
              "configFile": false,
              "compact": false,
              "presets": [
                [
                  "/home/dka/workspace/gitlab/www/node_modules/babel-preset-react-app/dependencies.js",
                  {
                    "helpers": true
                  }
                ]
              ],
              "cacheDirectory": true,
              "cacheCompression": false,
              "cacheIdentifier": "production:babel-plugin-named-asset-import@0.3.7:babel-preset-react-app@10.0.0:react-dev-utils@11.0.1:react-scripts@4.0.1",
              "sourceMaps": true,
              "inputSourceMap": true
            }
          },
          {
            "test": {},
            "exclude": {},
            "use": [
              {
                "loader": "/home/dka/workspace/gitlab/www/node_modules/react-scripts/node_modules/mini-css-extract-plugin/dist/loader.js",
                "options": {}
              },
              {
                "loader": "/home/dka/workspace/gitlab/www/node_modules/react-scripts/node_modules/css-loader/dist/cjs.js",
                "options": {
                  "importLoaders": 1,
                  "sourceMap": true
                }
              },
              {
                "loader": "/home/dka/workspace/gitlab/www/node_modules/postcss-loader/src/index.js",
                "options": {
                  "ident": "postcss",
                  "sourceMap": true
                }
              }
            ],
            "sideEffects": true
          },
          {
            "test": {},
            "use": [
              {
                "loader": "/home/dka/workspace/gitlab/www/node_modules/react-scripts/node_modules/mini-css-extract-plugin/dist/loader.js",
                "options": {}
              },
              {
                "loader": "/home/dka/workspace/gitlab/www/node_modules/react-scripts/node_modules/css-loader/dist/cjs.js",
                "options": {
                  "importLoaders": 1,
                  "sourceMap": true,
                  "modules": {}
                }
              },
              {
                "loader": "/home/dka/workspace/gitlab/www/node_modules/postcss-loader/src/index.js",
                "options": {
                  "ident": "postcss",
                  "sourceMap": true
                }
              }
            ]
          },
          {
            "test": {},
            "exclude": {},
            "use": [
              {
                "loader": "/home/dka/workspace/gitlab/www/node_modules/react-scripts/node_modules/mini-css-extract-plugin/dist/loader.js",
                "options": {}
              },
              {
                "loader": "/home/dka/workspace/gitlab/www/node_modules/react-scripts/node_modules/css-loader/dist/cjs.js",
                "options": {
                  "importLoaders": 3,
                  "sourceMap": true
                }
              },
              {
                "loader": "/home/dka/workspace/gitlab/www/node_modules/postcss-loader/src/index.js",
                "options": {
                  "ident": "postcss",
                  "sourceMap": true
                }
              },
              {
                "loader": "/home/dka/workspace/gitlab/www/node_modules/resolve-url-loader/index.js",
                "options": {
                  "sourceMap": true,
                  "root": "/home/dka/workspace/gitlab/www/src"
                }
              },
              {
                "loader": "/home/dka/workspace/gitlab/www/node_modules/sass-loader/dist/cjs.js",
                "options": {
                  "sourceMap": true
                }
              }
            ],
            "sideEffects": true
          },
          {
            "test": {},
            "use": [
              {
                "loader": "/home/dka/workspace/gitlab/www/node_modules/react-scripts/node_modules/mini-css-extract-plugin/dist/loader.js",
                "options": {}
              },
              {
                "loader": "/home/dka/workspace/gitlab/www/node_modules/react-scripts/node_modules/css-loader/dist/cjs.js",
                "options": {
                  "importLoaders": 3,
                  "sourceMap": true,
                  "modules": {}
                }
              },
              {
                "loader": "/home/dka/workspace/gitlab/www/node_modules/postcss-loader/src/index.js",
                "options": {
                  "ident": "postcss",
                  "sourceMap": true
                }
              },
              {
                "loader": "/home/dka/workspace/gitlab/www/node_modules/resolve-url-loader/index.js",
                "options": {
                  "sourceMap": true,
                  "root": "/home/dka/workspace/gitlab/www/src"
                }
              },
              {
                "loader": "/home/dka/workspace/gitlab/www/node_modules/sass-loader/dist/cjs.js",
                "options": {
                  "sourceMap": true
                }
              }
            ]
          },
          {
            "loader": "/home/dka/workspace/gitlab/www/node_modules/react-scripts/node_modules/file-loader/dist/cjs.js",
            "exclude": [
              {},
              {},
              {}
            ],
            "options": {
              "name": "static/media/[name].[hash:8].[ext]"
            }
          }
        ]
      }
    ]
  },
  "plugins": [
    {
      "options": {
        "template": "/home/dka/workspace/gitlab/www/public/index.html",
        "templateContent": false,
        "filename": "index.html",
        "publicPath": "auto",
        "hash": false,
        "inject": true,
        "scriptLoading": "blocking",
        "compile": true,
        "favicon": false,
        "minify": {
          "removeComments": true,
          "collapseWhitespace": true,
          "removeRedundantAttributes": true,
          "useShortDoctype": true,
          "removeEmptyAttributes": true,
          "removeStyleLinkTypeAttributes": true,
          "keepClosingSlash": true,
          "minifyJS": true,
          "minifyCSS": true,
          "minifyURLs": true
        },
        "cache": true,
        "showErrors": true,
        "chunks": "all",
        "excludeChunks": [],
        "chunksSortMode": "auto",
        "meta": {},
        "base": false,
        "title": "Webpack App",
        "xhtml": false
      },
      "version": 4
    },
    {
      "tests": [
        {}
      ]
    },
    {
      "replacements": {
        "NODE_ENV": "production",
        "PUBLIC_URL": "",
        "FAST_REFRESH": true,
        "REACT_APP_ENV": "prod",
        "REACT_APP_GA_ID": "G-G9XYVB9QGE"
      }
    },
    {
      "appPath": "/home/dka/workspace/gitlab/www"
    },
    {
      "definitions": {
        "process.env": {
          "NODE_ENV": "\"production\"",
          "PUBLIC_URL": "\"\"",
          "FAST_REFRESH": "true",
          "REACT_APP_ENV": "\"prod\"",
          "REACT_APP_GA_ID": "\"G-G9XYVB9QGE\""
        }
      }
    },
    {
      "options": {
        "filename": "static/css/[name].[contenthash:8].css",
        "ignoreOrder": false,
        "chunkFilename": "static/css/[name].[contenthash:8].chunk.css"
      }
    },
    {
      "opts": {
        "publicPath": "/",
        "basePath": "",
        "fileName": "asset-manifest.json",
        "transformExtensions": {},
        "writeToFileEmit": false,
        "seed": null,
        "filter": null,
        "map": null,
        "sort": null
      }
    },
    {
      "options": {
        "resourceRegExp": {},
        "contextRegExp": {}
      }
    },
    {
      "options": {
        "extensions": [
          "js",
          "mjs",
          "jsx",
          "ts",
          "tsx"
        ],
        "formatter": "/home/dka/workspace/gitlab/www/node_modules/react-scripts/node_modules/react-dev-utils/eslintFormatter.js",
        "eslintPath": "/home/dka/workspace/gitlab/www/node_modules/eslint/lib/api.js",
        "context": "/home/dka/workspace/gitlab/www/src",
        "cache": true,
        "cwd": "/home/dka/workspace/gitlab/www",
        "resolvePluginsRelativeTo": "/home/dka/workspace/gitlab/www/node_modules/react-scripts/config",
        "baseConfig": {
          "extends": [
            "/home/dka/workspace/gitlab/www/node_modules/eslint-config-react-app/base.js"
          ],
          "rules": {
            "react/react-in-jsx-scope": "error"
          }
        }
      }
    },
    {
      "options": {
        "cache": true,
        "minimizerOptions": {
          "plugins": [
            [
              "gifsicle",
              {
                "interlaced": true
              }
            ],
            [
              "jpegtran",
              {
                "progressive": true
              }
            ],
            [
              "optipng",
              {
                "optimizationLevel": 5
              }
            ],
            [
              "svgo",
              {
                "plugins": [
                  {
                    "removeViewBox": false
                  }
                ]
              }
            ]
          ]
        },
        "loader": true,
        "test": {},
        "filename": "[path][name][ext]",
        "deleteOriginalAssets": false
      }
    }
  ],
  "node": {
    "module": "empty",
    "dgram": "empty",
    "dns": "mock",
    "fs": "empty",
    "http2": "empty",
    "net": "empty",
    "tls": "empty",
    "child_process": "empty"
  },
  "performance": false
}

Do you know why build/static/media/1463771207-huge.1ab492b7.jpg is 11.39MB while original file in src/assets/images/careers/1463771207-huge.jpg is also 11.61MB ?

alexander-akait commented 3 years ago

You need configure jpegtran to compress images