CODEWITHSUNDEEP
javascriptreactjsmodulewebpackloader
bip-bop
bip-bop

Reputation: 1321

'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" />
  )
 }
}

Upvotes: 2

Views: 3231

Answers (1)

robertklep
robertklep

Reputation: 203304

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" />

Upvotes: 4

Related Questions