React and NextJS: Module parse failed: Unexpected token

Question

For my WebApp, i use React with NextJS. To be able to load graphics optimally I use the NextJS plugin next-optimized-images. But this plugin doesn't work correctly.

For Example, i imported a image like this:

import logo from '../../static/app-logo.svg';

and i try to use them in a <image> tag like this:

<img src={logo} height="24" width="115.5" alt="app-logo"></img>
//or so
<img src={require('../../static/app-logo.svg')} />

I get the error:

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

But however, this works:

const setbgImage = {
    backgroundImage: `url('../../static/background.jpg')`
};

<section className="welcomePageWelcome" style={setbgImage}>

My next.config.js looks like this:

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

module.exports = withPlugins([
    [optimizedImages, {
      /* config for next-optimized-images */
    }],
    withCSS()
  ]);

I have already written to the developer, but unfortunately I have not received an answer yet. I hope you can help me further.

PS: I had previously used the plugin next-images. However, the images with next-optimized-images load much faster. So I'd rather use the plugin.

Answer 1

You can load images by configuring nextJS. Make below changes in next.config.js

const withCSS = require('@zeit/next-css');
const withSASS = require('@zeit/next-sass');
const withOptimizedImages = require('next-optimized-images');

module.exports = withOptimizedImages(withCSS(withSASS ({
       cssModules: true
})));