Plugin not working

[dd8888]

Hey, I just downloaded the plugin and it doesn't seem to work.

This is my craco.config.js (copy-pasted the example)

const imageOptimizer = require('craco-image-optimizer-plugin');
module.exports = function ({ env }) {
  return {
    reactScriptsVersion: 'react-scripts',
    style: {
      postcss: {
        plugins: [
          require('tailwindcss'),
          require('postcss-focus-visible'),
          require('autoprefixer'),
        ],
      },
    },
    plugins: [
      {
        plugin: CracoAlias,
        options: {
          source: 'tsconfig',
          // baseUrl SHOULD be specified
          // plugin does not take it from tsconfig
          baseUrl: './src',
          // tsConfigPath should point to the file where "baseUrl" and "paths" are specified
          tsConfigPath: './tsconfig.extend.json',
        },
      },
      {
        plugin: imageOptimizer,
        // image-webpack-plugin options
        options: {
          mozjpeg: {
            progressive: true,
            quality: 65,
          },
          // optipng.enabled: false will disable optipng
          optipng: {
            enabled: false,
          },
          pngquant: {
            quality: [0.65, 0.9],
            speed: 4,
          },
          gifsicle: {
            interlaced: false,
          },
          // the webp option will enable WEBP
          webp: {
            quality: 75,
          },
        },
      },
    ],
  };
};

But on prod, the images are still the same. Any ideas? Thanks.

[biggyspender]

Something changed in react-scripts.

If you copy https://github.com/kkulbae/craco-image-optimizer-plugin/blob/master/index.js

and replace:

    const urlLoader = getLoader(config, loaderByName('url-loader'));
    const loader = urlLoader.match.loader;

with

        const urlLoaderCandidates = getLoaders(config, loaderByName('url-loader'));
        const urlLoader = urlLoaderCandidates.matches.find(m =>
            m.loader &&
            m.loader.test &&
            (Array.isArray(m.loader.test)
                ? m.loader.test.some(r => r.toString().indexOf("jpe?g") >= 0)
                : m.loader.test.toString().indexOf("jpe?g") >= 0));
        if (!urlLoader) {
            throw Error("could not find correct url-loader. did you change react-scripts version?");
        }
        const loader = urlLoader.loader;

taking care to import getLoaders instead of getLoader

Then just import the file instead of this package.

[biggyspender]

@dd8888 I submitted a pull request that addresses this issue in a slightly different way, although end outcome is the same.

[nick4fake]

Still an issue:

TypeError: Cannot read properties of undefined (reading 'loader')