Next.js: react-svg-loader with next.config.js

[patryk-janik]

Bug report

Describe the bug

I want to use 'react-svg-loader' webpack loader with next.js to load .svg files.
For now I got errors like:

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Install react-svg-loader and babel-loader devDependencies.
2. Extend next.config.js with this loader:

config.module.rules.push({
        test: /\.svg$/,
        use: [
          {
            loader: 'babel-loader',
          },
          {
            loader: 'react-svg-loader',
            options: {
              jsx: true,
              svgo: {
                plugins: [
                  {
                    cleanupIDs: {
                      prefix: {
                        toString() {
                          this.counter = this.counter || 0;
                          return `id-${this.counter++}`;
                        },
                      },
                    },
                  },
                  {
                    removeTitle: true,
                  },
                ],
              },
            },
          },
        ],
      });

1. Import and try to render Icon component like:

import * as React from 'react';
import TestIcon from './icon/assets/age.svg';
export default () => <TestIcon/>;

Expected behavior

I should see the rendered icon.

System information

• OS: [Windows]
• Browser (if applies) [chrome]
• Version of Next.js: [9.0.7]

[viztor]

Just use public folder and just load it as a static img

[kachkaev]

From my prior experience, you might be applying two rules to the same SVG somewhere. Try console-logging config.module.rules – is there one mentioning .svg already? It could come from some Next.js plugin that you use.

The solution would be to narrow down the scope of the loader that you are adding, e.g:

      config.module.rules.push({
        test: /\.svg$/,
        include: [require("path").resolve(__dirname, "src/my/specific/folder")],
        use: /* ... */,
      })

This is unlily to be the issue with Next.js itself.

[patryk-janik]

@kachkaev yes, this was the issue. I've solved it. Thank you!

[GeorgeWL]

Just use public folder and just load it as a static img

people often want to import as a react component so they can reactively set properties, such as fill colour.

and saying "just don't" isn't helpful.