CODEWITHSUNDEEP
javascriptreactjswebpack
Develoger
Develoger

Reputation: 3998

Webpack + React + multiple SVG loaders issue

{
  test: /\.svg/,
  use: [
    {
      loader: 'url-loader'
    },
    {
      loader: 'svg-react-loader'
    }
  ]
}

This is module: { rules: [ section regarding SVG loaders in my webpack.config.js

Anyone used similar setup and had issues with importing svg files in React?

I need both to load svg in CSS and to import them in React. If I use

But together imports in React fails with the following error:

Module build failed: Error: Non-whitespace before first tag.

Here is how I import the SVG in React cmp:

import StarIcon from 'svg-react-loader!mdi-svg/svg/star.svg';

Upvotes: 1

Views: 2950

Answers (2)

Назар Мельник
Назар Мельник

Reputation: 301

A better way is to use oneOf, but with include option, which is logically more correct, than exclude option:

{
  test: /\.svg$/,
  oneOf: [
    {
      include: path.resolve(__dirname, '../node_modules/'),
      use: 'svg-react-loader'
    },
    {
      include: path.resolve(__dirname, '../src/'),
      use: 'url-loader'
    },
  ],
}

Upvotes: 2

Develoger
Develoger

Reputation: 3998

Apparently the cleanest way to handle loaders without a need to reference the loader in the actual JS / CSS code during the imports is to use oneOf with exclude property:

    {
      test: /\.svg$/,
      oneOf: [
        {
          exclude: path.resolve(__dirname, '../src/'),
          use: 'svg-react-loader'
        },
        {
          exclude: path.resolve(__dirname, '../node_modules/'),
          use: 'url-loader'
        },
      ],
    }

Upvotes: 5

Related Questions