Error: You may need an appropriate loader to handle this file type

[thanhtoan1196]

In component file: <img src={require('../static/images/icon.png')} /> In next.config.js:

const withImages = require('next-images')();
...
module.exports = withPlugins([withImages, sourceMaps, withBundleAnalyzer],
    {
        ....
    });

Error:

wait  - compiling...
error - ./static/images/icon.png 1:0
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. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

Version: 1.6.2

[crslegend]

+1 facing this issue as well

[arefaslani]

You shouldn’t call the function after requiring the package. Please change the require statement to:

- const withImages = require('next-images')();
+ const withImages = require('next-images');

[arefaslani]

I'll close this issue and consider this problem as solved. Please fill free to reopen it if the problem still exists.

[Anthodpnt]

Hello!

I'm reopening the issue because I keep having the exact same issue with the solution @arefaslani provided.