Valeria Shpiner Valeria Shpiner - 1 year ago 222
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 }) => {
config.plugins.push(
new Webpack.DefinePlugin([{
__BROWSER__: "typeof window !== 'undefined'",
__NETLIFY_BRANCH__: JSON.stringify(process.env.BRANCH),
__CONFIG__: JSON.stringify({
GRAPHQL_URL: process.env.GRAPHQL_URL,
SEGMENT_WRITEKEY: process.env.SEGMENT_WRITEKEY,
}),
}])
)
config.module.rules.push(
{
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="http://www.w3.org/2000/svg"',
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: https://github.com/zeit/next.js/issues/544) 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": [
       "inline-react-svg"
     ]
    
  • 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