Module parse failed: Unexpected character '�' (1:0)

I’m getthing this error for both dev & prod builds, for all image file types:

Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

I’ve tried reinstalling dependency packages. Also tried to configure next config with and without next-compose-plugins but same result. My current config:

const webpack = require('webpack');
const sass = require('@zeit/next-sass');
const CSS = require('@zeit/next-css')
const withPlugins = require('next-compose-plugins');
const optimizedImages = require('next-optimized-images');
const fonts = require('next-fonts');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

const nextConfig = {
  serverRuntimeConfig: { // Will only be available on the server side
    
  },
  publicRuntimeConfig: { // Will be available on both server and client
    DOMAIN: process.env.NODE_ENV == 'production' ? 'https://www.example.com/wordpress/index.php' : 'http://example.dev',
  }
}

module.exports = withPlugins([
  [optimizedImages, {
    optimizeImagesInDev: true
  }
  ],
  [sass({
    webpack(config, options) {
      config.module.rules.push({
        test: /\.(raw)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: 'raw-loader',
      });
      if (config.mode === 'production') {
        if (Array.isArray(config.optimization.minimizer)) {
          config.optimization.minimizer.push(new OptimizeCSSAssetsPlugin({}));
        }
      }
      return config;
    }
  })],
  [CSS],
  [fonts]

  // your other plugins here
 
], nextConfig);

[gisete]

@geochanto I was! I still get the warnings in dev but no warnings in prod anymore. In my case too I was getting a not found error message for the optimized assets but I think it got fixed after I deleted package-lock.json and the node-modules folder and re-installed everything but I think you already tried that too right?

In case it helps here’s my next config now:

const webpack = require('webpack')
const withCSS = require('@zeit/next-css')
const withPlugins = require('next-compose-plugins');
const optimizedImages = require('next-optimized-images');
const path = require('path');
const isDevelopment = process.env.NODE_ENV === 'development'
const isProduction = process.env.NODE_ENV === 'production';

const nextConfig = {
    webpack: (config, { dev }) => {
        config.plugins.push(
            new webpack.EnvironmentPlugin(process.env),
        );
        
        config.resolve.alias['components'] = path.join(__dirname, 'components')
        config.resolve.alias['static'] = path.join(__dirname, 'static')

        return config;
    },
};

module.exports = withPlugins([
    [optimizedImages, {
        handleImages: ['jpeg', 'png'],
    }],
    withCSS
    ],
    nextConfig
);

[gisete]

Just narrowed down what’s works vs what doesn’t. Looks like I start getting this error when I add config options.

This doesn’t work:

const withCSS = require('@zeit/next-css')
const withPlugins = require('next-compose-plugins');
const optimizedImages = require('next-optimized-images');
const path = require('path');

module.exports = withPlugins([
    [ optimizedImages, {
            imagesOutputPath: 'static/',
            handleImages: ['jpeg', 'png'],
    }]
    ],
{
    webpack: (config, { dev }) => {
        config.plugins.push(
            new webpack.EnvironmentPlugin(process.env),
        );
        
        // Config to have absolute imports instead of relative imports 
        config.resolve.alias['components'] = path.join(__dirname, 'components')
        config.resolve.alias['static'] = path.join(__dirname, 'static')

        return config;
    },
});

This works:

const webpack = require('webpack')
const withCSS = require('@zeit/next-css')
const withPlugins = require('next-compose-plugins');
const optimizedImages = require('next-optimized-images');
const path = require('path');

module.exports = withPlugins([
        optimizedImages
    ],
{
    webpack: (config, { dev }) => {
        config.plugins.push(
            new webpack.EnvironmentPlugin(process.env),
        );
        
        // Config to have absolute imports instead of relative imports 
        config.resolve.alias['components'] = path.join(__dirname, 'components')
        config.resolve.alias['static'] = path.join(__dirname, 'static')

        return config;
    },
});