Valeria Shpiner Valeria Shpiner - 1 year ago 175
React JSX Question

'Cannot find module' when using webpack loaders

I use custom webpack for my app with Next.js:

const path = require('path');
const Webpack = require('webpack');

module.exports = {
webpack: (config, { dev }) => {
new Webpack.DefinePlugin([{
__BROWSER__: "typeof window !== 'undefined'",
__NETLIFY_BRANCH__: JSON.stringify(process.env.BRANCH),
__CONFIG__: JSON.stringify({
test: /\.png$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
name: 'graphics/[name].[ext]',
test: /\.svg$/,
loader: [
loader: 'babel-loader',
query: {
presets: ['es2015']
loader: 'svg-react-loader',
loader: 'string-replace-loader',
options: {
search: ' xmlns=""',
replace: '',
return config;

But when I try to add image to my component, my localhost launched, but I receive the error:

Cannot find module '../assets/logo.svg'

I import my image to the component as usual, and without an image, my app is running. Maybe I should add something to my webpack?
All images set in dir assets.

import logo from '../assets/logo.svg';

export default class Layout extends React.Component {
render () {
return (
<img src={logo} alt="logo" />

Answer Source

The issue (from what I understand from this: is that Next.js doesn't use Webpack for server side rendering, only for client side, so you can't import an SVG like you do when it's purely a client side React project (i.e. by adding a rule for .svg files and run those files through a loader chain).

A possible solution is mentioned here, where the SVG import is not done by a Webpack loader, but by Babel (which is used on the server side code in Next.js).

It seems to work for me, like this:

  • npm i babel-plugin-inline-react-svg --save
  • add/merge the following to your Babel config (more info on how to set up a custom Babel configuration here):

     "plugins": [
  • in your component/page, use this (the name of the variable, LogoSVG, is important and shouldn't be changed):

    import LogoSVG from '../assets/logo.svg';
  • and use it as a React component:

    return <LogoSVG alt="logo" />
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download