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

[geochanto]

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:https://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]

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]

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

[geochanto]

@gisete for me it still does not work when removing optimizedImages config & next-css. Either way looks like a major bug to me.

[gisete]

@geochanto just checking, did you install the individual optimization packages? After digging in a little further yesterday I realized we might be having different issues. In my case it seems like the config settings were not working because it was not accepting that I only wanted to optimize jpg and png only, instead it was looking for the right modules to handle gif, svg and ico files too while I had only installed the jpg and png modules.

[geochanto]

@gisete I did install all the optimization packages. And, since gifsicle seems to have issues of its own, I excluded gif and handled rest of the images in optimizedImages config: handleImages: ['jpg','jpeg', 'png', 'svg', 'webp']. Still the same issue.

Were you able to get it working on your end?

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

[geochanto]

@gisete yes, I tried all that. Do you mind sharing a snippet how you're requiring the image in your component? Perhaps I have something wrong there. I'm testing with something like <img src={require('../static/test/banner.jpg')} />

[gisete]

This is how I'm using it:
<img src={require('static/screenshots/[email protected]')} alt=""/>

I can get it to work this way because I'm using absolute paths now with this line in my next config:
config.resolve.alias['static'] = path.join(__dirname, 'static')

I think before I would have used the same way you are using it.

[geochanto]

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

@gisete thanks for your help.

[shunkakinoki]

Any updates on this? I'm still getting the same error

[stoicsleuth]

For anyone reading this, I was getting the same error without using any external CSS plugin.

What fixed it for me was by simply upgrading to the latest version. (v2.5.4 -> v2.6.2)

[PaulinaLL]

For anyone reading this, I was getting the same error without using any external CSS plugin.

What fixed it for me was by simply upgrading to the latest version. (v2.5.4 -> v2.6.2)

hi stoicsleuth, which tool did you update?

[bbrizzi]

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.

[ambujkhanna]

I am facing same error during compilation but I am not using next library in my project. Any one has any idea how to resolve it?
./src/assets/images/success.png:1:0 - Error: Module parse failed: Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. Se (Source code omitted for this binary file)

[MAleemH]

I am facing same error during compilation but I am not using next library in my project. Any one has any idea how to resolve it? ./src/assets/images/success.png:1:0 - Error: Module parse failed: Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. Se (Source code omitted for this binary file)

I'm also facing this issue. Please let me know if you got the solution. Thanks.

[Andrewij21]

i am facing the same problem,i solve it !!!

i am using vue,this is my previous code

insinde data i put this
partners: [ {id: 1,img: "7.png"}]

and in template i use this to call the image
<img class="center-block":src="require(@/assets/img/partners/${partner.img})"alt=""/>

resolve:
insinde data i put this
partners: [ {id: 1,img: "7"}]

and in template i use this to call the image
<img class="center-block":src="require(@/assets/img/partners/${partner.img}.png)"alt=""/>

I just remove png in data and put it in template :)
Hope it's help