How to configure with create-react-app and react-app-rewired ?

[kopax]

I am working within a create-react-app, using [email protected] and [email protected].

I am seeking a solution to optimize my assets images and found this new plugin which looks promising, however, it does not work for me.

This is how I tried to configure my config-overrides.js:

const rewireDefinePlugin = require('@yeutech-lab/react-app-rewire-define-plugin');

module.exports = {
    config.rules = (config.rules || []).concat([
      {
        test: /\.(png|jpe?g|gif|svg|webp)$/i,
        use: [
          {
            loader: 'optimized-images-loader',
            options: {
              // see below for available options
            },
          },
        ],
      },
    ]);
    return config;
  },
};

This is the error I have:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'rules'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, externals?, infrastructureLogging?, loader?, mode?, module?, name?, node?, optimization?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, serve?, stats?, target?, watch?, watchOptions? }
   For typos: please correct them.
   For loader options: webpack >= v2.0.0 no longer allows custom properties in configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           rules: …
         }
       })
     ]

I compared the version and you also use webpack 4. Do you have a clue why I am not able to use this plugin?

Thanks for sharing!

Edit

I manage to get it work with:

    config.module.rules = (config.module.rules || []).concat([
      {
        // test: /\.(png|jpe?g|gif|svg|webp)$/i,
        test: /\.(png|jpe?g|gif|webp)$/i,
        use: [
          {
            loader: 'optimized-images-loader',
            options: {
              includeStrategy: 'react',
              // see below for available options
            },
          },
        ],
      },
    ]);

However, all my images are now broken in my app. I checked what an import was bringing and it's a base64 (apparently wrong string). So I wanted to verified if it worked well, I have added ?colors at the end of the image import:

import heroImage from './../../assets/images/business/architecture-1354811_640-md.jpg?colors';
console.log(heroImage);

I expect an hex colors, instead, I still have the base64 image: data:image/jpeg;base64,dmFyIHJlcz1bIiNkOGQ4ZDgiLCIjMjYyNjI2IiwiIzk3OTc5NyIsIiM3MjcyNzIiLCIjOGM4YzhjIl07cmVzLndpZHRoPTY0MDtyZXMuaGVpZ2h0PTQyNTtyZXMuZm9ybWF0PSJqcGVnIjttb2R1bGUuZXhwb3J0cyA9IHJlczs=

import heroImage from './../../assets/images/business/architecture-1354811_640-md.jpg';

I expect an hex colors, instead, I still have the base64 image: data:image/jpeg;base64,dmFyIHNyYyA9IF9fd2VicGFja19wdWJsaWNfcGF0aF9fICsgImFyY2hpdGVjdHVyZS0xMzU0ODExXzY0MC1tZC0xYWEwYmY4YWU3MDAzMzJhZGVhNTNmMTZlNTAwM2MzZC5qcGciO21vZHVsZS5leHBvcnRzPXtzcmM6c3JjLHdpZHRoOjY0MCxoZWlnaHQ6NDI1LGZvcm1hdDoianBlZyIsdG9TdHJpbmc6ZnVuY3Rpb24oKXtyZXR1cm4gc3JjO319Ow==

I have tried to decode this base64 online and the import is text/plain:

var src = __webpack_public_path__ + "architecture-1354811_640-md-1aa0bf8ae700332adea53f16e5003c3d.jpg";module.exports={src:src,width:640,height:425,format:"jpeg",toString:function(){return src;}};

How can I configure optimized-images-loader?