next-optimized-images: 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);

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 16

Most upvoted comments

@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
);

+18

gisete on Jul 16, 2019

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;
    },
});

gisete on Jul 15, 2019

Same happening for me too. In my case it works fine when I remove the config for next-css, its almost like it works with one or the other but not both next-css and next-optimized-images.

gisete on Jul 13, 2019

Had the same problem, my mistake was in the next-compose-plugins syntax : the nextConfig should not be in the plugins array but as a second argument to withPlugins.

bbrizzi on Jan 5, 2021

OK I found the culprit… It’s somewhere in my sass webpack config. Works without it.

@gisete thanks for your help.

geochanto on Jul 16, 2019