Using svgr with webpack 5 #551

vyachsed · 2021-04-14T18:23:09Z

Hi! I am using two kinds of imports in my application, like: import starUrl from './star.svg' and import { ReactComponent as Star } from './star.svg'
This works well if using file-loader. But in webpack 5 the file-loader, raw-loader, raw-loader is deprecated. Now we need to use asset-modules (https://webpack.js.org/guides/asset-modules/). I tried to use all kinds, but nothing worked for me.

open-collective-bot · 2021-04-14T18:23:10Z

Hey @vyachsed 👋,
Thank you for opening an issue. We'll get back to you as soon as we can.
Please, consider supporting us on Open Collective. We give a special attention to issues opened by backers.
If you use SVGR at work, you can also ask your company to sponsor us ❤️.

feRpicoral · 2021-04-15T14:30:46Z

UPDATE: My problem is actually webpack config related, not SVGR's nor NextJS'.

I'm also having problems with SVGR and Webpack5. I'm using NextJS and when enabling Webpack5, I get the following error:

ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration[0].module.rules[3].issuer has an unknown property 'test'. These properties are valid:
   object { and?, not?, or? }
 - configuration[1].module.rules[3].issuer has an unknown property 'test'. These properties are valid:
   object { and?, not?, or? }

configuration[0].modules.rules[3] is the following:

{
  test: /\.svg$/,
  issuer: { test: /\.(js|ts|jsx|tsx)x?$/ },
  use: [ '@svgr/webpack' ]
}

When removing the issuer it does work.

I tried changin

 issuer: { 
    test: '/\\.(js|ts|jsx|tsx)x?$/'
 }

to

issuer: {
    and: [ '/\\.(js|ts|jsx|tsx)x?$/' ]
 }

which resulted in no compile errors but SVGR wasn't working.

ssbb · 2021-04-17T12:44:17Z

@feRpicoral I believe you can use just issuer: /\.(js|ts)x?$/

jahirfiquitiva · 2021-04-29T05:40:12Z

I got it working but it's showing this:

<w> [webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] Resolving '@babel/core/lib/config/validation/option-assertions' in /Users/jahir/dev/jahir/synaptiko/fe/node_modules/@babel/plugin-proposal-object-rest-spread/node_modules/@babel/core/lib/config/validation for build dependencies doesn't lead to expected result '/Users/jahir/dev/jahir/synaptiko/fe/node_modules/@babel/plugin-proposal-object-rest-spread/node_modules/@babel/core/lib/config/validation/option-assertions.js', but to '/Users/jahir/dev/jahir/synaptiko/fe/node_modules/@babel/plugin-proposal-object-rest-spread/node_modules/@babel/core/node_modules/@babel/core/lib/config/validation/option-assertions.js' instead. Resolving dependencies are ignored for this path.
<w>  at unknown 4 @babel/core/lib/config/validation/option-assertions
<w>  at file dependencies /Users/jahir/dev/jahir/synaptiko/fe/node_modules/@babel/plugin-proposal-object-rest-spread/node_modules/@babel/core/lib/config/validation/options.js
<w>  at file /Users/jahir/dev/jahir/synaptiko/fe/node_modules/@babel/plugin-proposal-object-rest-spread/node_modules/@babel/core/lib/config/validation/options.js
<w>  at file dependencies /Users/jahir/dev/jahir/synaptiko/fe/node_modules/@babel/plugin-proposal-object-rest-spread/node_modules/@babel/core/lib/config/partial.js
<w>  at file /Users/jahir/dev/jahir/synaptiko/fe/node_modules/@babel/plugin-proposal-object-rest-spread/node_modules/@babel/core/lib/config/partial.js
<w>  at file dependencies /Users/jahir/dev/jahir/synaptiko/fe/node_modules/@babel/plugin-proposal-object-rest-spread/node_modules/@babel/core/lib/config/index.js
<w>  at file /Users/jahir/dev/jahir/synaptiko/fe/node_modules/@babel/plugin-proposal-object-rest-spread/node_modules/@babel/core/lib/config/index.js
<w>  at file dependencies /Users/jahir/dev/jahir/synaptiko/fe/node_modules/@babel/plugin-proposal-object-rest-spread/node_modules/@babel/core/lib/transform-file.js
<w>  at file /Users/jahir/dev/jahir/synaptiko/fe/node_modules/@babel/plugin-proposal-object-rest-spread/node_modules/@babel/core/lib/transform-file.js
<w>  at file dependencies /Users/jahir/dev/jahir/synaptiko/fe/node_modules/@babel/plugin-proposal-object-rest-spread/node_modules/@babel/core/lib/index.js
<w>  at file /Users/jahir/dev/jahir/synaptiko/fe/node_modules/@babel/plugin-proposal-object-rest-spread/node_modules/@babel/core/lib/index.js
<w>  at file dependencies /Users/jahir/dev/jahir/synaptiko/fe/node_modules/@babel/plugin-proposal-object-rest-spread/lib/index.js
<w>  at file /Users/jahir/dev/jahir/synaptiko/fe/node_modules/@babel/plugin-proposal-object-rest-spread/lib/index.js
<w>  at file dependencies /Users/jahir/dev/jahir/synaptiko/fe/node_modules/workbox-build/node_modules/@babel/preset-env/lib/available-plugins.js
<w>  at file /Users/jahir/dev/jahir/synaptiko/fe/node_modules/workbox-build/node_modules/@babel/preset-env/lib/available-plugins.js
<w>  at file dependencies /Users/jahir/dev/jahir/synaptiko/fe/node_modules/workbox-build/node_modules/@babel/preset-env/lib/index.js
<w>  at file /Users/jahir/dev/jahir/synaptiko/fe/node_modules/workbox-build/node_modules/@babel/preset-env/lib/index.js
<w>  at file dependencies /Users/jahir/dev/jahir/synaptiko/fe/node_modules/workbox-build/build/lib/bundle.js
<w>  at file /Users/jahir/dev/jahir/synaptiko/fe/node_modules/workbox-build/build/lib/bundle.js
<w>  at file dependencies /Users/jahir/dev/jahir/synaptiko/fe/node_modules/workbox-webpack-plugin/build/generate-sw.js
<w>  at file /Users/jahir/dev/jahir/synaptiko/fe/node_modules/workbox-webpack-plugin/build/generate-sw.js
<w>  at file dependencies /Users/jahir/dev/jahir/synaptiko/fe/node_modules/workbox-webpack-plugin/build/index.js
<w>  at file /Users/jahir/dev/jahir/synaptiko/fe/node_modules/workbox-webpack-plugin/build/index.js
<w>  at file dependencies /Users/jahir/dev/jahir/synaptiko/fe/node_modules/next-pwa/index.js
<w>  at file /Users/jahir/dev/jahir/synaptiko/fe/node_modules/next-pwa/index.js
<w>  at file dependencies /Users/jahir/dev/jahir/synaptiko/fe/next.config.js
<w>  at file /Users/jahir/dev/jahir/synaptiko/fe/next.config.js
<w>  at resolve commonjs /Users/jahir/dev/jahir/synaptiko/fe/next.config.js

gauravkrp · 2021-05-10T12:52:21Z

I'm also facing this issue

JonasBa · 2021-05-12T13:27:50Z

I took a peek at how docusaurus does this in their config and I made it compile w/o errors using the following config:

const config = {
  future: {
    webpack5: true,
  },
  webpack(config, options) {
    config.module.rules.push({
      test: /\.svg?$/,
      oneOf: [
        {
          use: [
            {
              loader: '@svgr/webpack',
              options: {
                prettier: false,
                svgo: true,
                svgoConfig: {
                  plugins: [{removeViewBox: false}],
                },
                titleProp: true,
              },
            },
          ],
          issuer: {
            and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
          },
        },
      ],
    })

    return config
  },
}

Hope it helps 🙏🏼

Perni1984 · 2021-05-18T10:21:05Z

@JonasBa for me the viewbox attribute is still stripped from my svgs despite removeViewBox: false - can you confirm the options passed to svgo works in your case?

Edit: The option works, it was my fault as I didn't have proper camelCase naming for the viewBox attribute as mentioned in svg/svgo#505 (comment)

meetajhu · 2021-05-27T15:26:41Z

If you are trying to handle both css/scss also need svgr component, import using file-loader(Webpack 4) aka AssetModule(assets/resource in Weback5) try something like this

{
          test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,          
          oneOf: [
            {
              type: "asset/resource",
              generator: { //remove this if not required
                filename: "static/media/images/[name][ext]",
              },
              issuer: {//Only use file-loader aka assets/resource for svg's referenced in css/scss
                and: [/\.(sa|sc|c)ss$/],
              },
            },
          ],
        },
        {//use SVGR for imports in js/jsx files
          test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
          oneOf: [
            {
              use: [
                'babel-loader',
                {
                  loader: '@svgr/webpack',
                  options: {
                    babel: false,
                    icon: true,
                  },
                }
              ],
              issuer: {
                and: [/\.(js|jsx)$/],
              },
            },
          ],
        },

Then you import like this js/jsx

import starUrl from './star.svg'

gupta-ji6 · 2021-06-16T10:57:01Z

@JonasBa you're a life savior, thank you for sharing this 🙏🏻🙏🏻🙏🏻

marella · 2021-06-17T13:16:29Z

I made a small loader new-url-loader that provides the functionality of both url-loader and file-loader using asset modules. For example, you can replace url-loader using:

{
  test: /\.svg$/,
- use: ['@svgr/webpack', 'url-loader'],
+ oneOf: [
+   {
+     dependency: { not: ['url'] },
+     use: ['@svgr/webpack', 'new-url-loader'],
+   },
+   {
+     type: 'asset', // Use 'asset/resource' for file-loader
+   },
+ ],
}

Now you can continue to use both the URL and React component:

import starUrl, { ReactComponent as Star } from './star.svg';

See README for more info. I also created a minimal example.

njerschow · 2021-06-18T22:21:08Z

I tried the solution mentioned by @JonasBa but I'm still getting

TypeError: unsupported file type: undefined (file: undefined) about my SVG images, is anyone else getting this as well or is this an svgr related problem?

getahead-dev · 2021-06-19T04:07:25Z

@njerschow fixed with this vercel/next.js#26130 (comment)

privateOmega · 2021-06-20T10:20:55Z

Anyone still looking for a fix, its not that file-loader still can't be used along with webpack5, it just needs some additional modification. Try the following out. type: "javascript/auto" part specifies not to use the asset resources step and allows us to use file-loader, url-loader or any of the other loaders to attain the same.

{
                test: /\.svg$/,
                use: [
                    {
                        loader: "@svgr/webpack"
                    },
                    {
                        loader: "file-loader"
                    }
                ],
                type: "javascript/auto",
                issuer: {
                    and: [/\.(ts|tsx|js|jsx|md|mdx)$/]
                }
            },

mapreal19 · 2021-06-29T10:01:35Z

@privateOmega thank you, this is what worked for me.

allpwrfulroot · 2021-06-30T00:31:45Z

This posted solution worked for me, sharing here to maybe save someone some time: https://stackoverflow.com/questions/61498644/storybook-failed-to-execute-createelement-on-svg-files-using-svgr-webpack

levymetal · 2021-07-20T05:34:04Z

Note that issuer is not respected when importing via require.context. See: webpack/webpack#9309. To get around this, you can leverage oneOf in your webpack config and define the rules for asset modules before @svgr/webpack. oneOf uses the first set of rules that match, which allows you to omit issuer on the last set.

I'm unclear whether type: 'javascript/auto' is necessary here as the assets matched by the final rule shouldn't be getting processed by asset modules. I get the exact same behaviour with & without it, YMMV.

{
  test: /\.svg$/,
  oneOf: [
    {
      issuer: /\.s?css$/,
      type: 'asset/resource',
    },
    {
      use: [
        {
          loader: '@svgr/webpack',
          options: {
            svgoConfig: {
              plugins: [{removeViewBox: false}],
            },
          },
        },
        {
          loader: 'file-loader',
        },
      ],
      type: 'javascript/auto',
    },
  ],
},

renyuns · 2021-07-30T07:40:04Z

I made a small loader new-url-loader that provides the functionality of both url-loader and file-loader using asset modules. For example, you can replace url-loader using:
{
  test: /\.svg$/,
- use: ['@svgr/webpack', 'url-loader'],
+ oneOf: [
+   {
+     dependency: { not: ['url'] },
+     use: ['@svgr/webpack', 'new-url-loader'],
+   },
+   {
+     type: 'asset', // Use 'asset/resource' for file-loader
+   },
+ ],
}
Now you can continue to use both the URL and React component:
import starUrl, { ReactComponent as Star } from './star.svg';
See README for more info. I also created a minimal example.

tks 👍👍👍

zhimng · 2021-08-16T06:22:47Z

I took a peek at how docusaurus does this in their config and I made it compile w/o errors using the following config:

const config = {
  future: {
    webpack5: true,
  },
  webpack(config, options) {
    config.module.rules.push({
      test: /\.svg?$/,
      oneOf: [
        {
          use: [
            {
              loader: '@svgr/webpack',
              options: {
                prettier: false,
                svgo: true,
                svgoConfig: {
                  plugins: [{removeViewBox: false}],
                },
                titleProp: true,
              },
            },
          ],
          issuer: {
            and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
          },
        },
      ],
    })

    return config
  },
}

Hope it helps 🙏🏼

This works, and I think the documentation on issuer should be updated, otherwise it's really confusing.

todorpr · 2021-09-02T15:30:28Z

I was struggling to load a sprite SVG using this syntax:

import { ReactComponent as Sprite } from './sprite.svg'

function App() {
  return (
    <>
      <Sprite
        style={{
          position: 'absolute',
          width: 0,
          height: 0,
          overflow: 'hidden'
        }}
      />
      <div className="App">
      ...

Nothing from this thread worked. What did the trick was this config:

    {
        test: /\.svg$/,
        use: [
          {
            loader: '@svgr/webpack',
            options: {
              prettier: false,
              svgo: false,
              svgoConfig: {
                plugins: [{ removeViewBox: false }]
              },
              titleProp: true,
              ref: true
            }
          },
          {
            loader: 'file-loader',
            options: {
              name: 'static/media/[name].[hash].[ext]'
            }
          }
        ],
        issuer: {
          and: [/\.(ts|tsx|js|jsx|md|mdx)$/]
        }
      }

Got this config from React script's webpack config

gregberge · 2021-09-12T07:19:20Z

OK guys, I think we have a webpack bug here. Isn't it? Anything SVGR can do as a workaround?

nikhilnayyar2 · 2021-09-14T16:58:56Z

@levymetal thanks. I have modified your answer.

Lets say we have a react.svg file of size more than 200KB.

Webpack config:

            {
                test: /\.svg$/,
                oneOf: [
                    {
                        issuer: /\.[jt]sx?$/,
                        resourceQuery: /react/, // *.svg?react
                        use: ['@svgr/webpack']
                    },
                    {
                        type: 'asset',
                        parser: {
                            dataUrlCondition: {
                                maxSize: 200
                            }
                        }
                    },
                ],
            },

In your react component:

import "@styles/index.css";

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import svg from '@assets/react.svg';
import Svg from '@assets/react.svg?react';

function App() {
    return (
        <div>
            <img src={svg} width="200" height="200" />
            <div id="css-svg-sample"></div>
            <Svg  width="200" height="200" viewBox="0 0 3500 3500"/>
        </div>
    )
}

ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById('root')
);

css file:

#css-svg-sample {
  background-image: url(@assets/react.svg);
  background-size: contain;
  width: 200px;
  height: 200px;
}

Since our react.svg file > 200KB, webpack output 1 file only. That single file is referenced by webpack in css background-image property and img src attribute.

Here is the demo: https://github.com/nikhilnayyar002/react-min

References:
https://webpack.js.org/configuration/module/#ruleoneof
https://react-svgr.com/docs/webpack/#handle-svg-in-css-sass-or-less

No need to add file-loader & url-loader!

birdofpreyru · 2021-11-02T11:17:59Z

If you use babel-loader you can use my babel-preset-svgr to let Babel handle it.

ywroh · 2021-11-19T00:20:16Z

@privateOmega fixed with this gregberge/svgr/issues/551 (comment)

oh thank @privateOmega so much I struggled all day yesterday, but I solved it with the code you gave me. thank you!.

gregberge · 2021-11-28T22:52:42Z

Part of new documentation.

SuperOleg39 · 2022-10-03T14:20:47Z

Somebody knows workaround for typescript?

import Svg from '@assets/react.svg?react'; - looks like it is impossible to create declaration file for this pattern

SuperOleg39 · 2022-10-03T15:21:28Z

Sorry, it was code editor typings resolution problems.
Simple pattern like *.svg?svgr works:

declare module '*.svg?svgr' {
  import type { ComponentType, SVGProps } from 'react';

  type SvgComponent = ComponentType<SVGProps>;

  const Svg: SvgComponent;

  export = Svg;
}

Fixing Typescript "Cannot find module" for svg assets: [svgr d.ts](gregberge/svgr#551 (comment))

* fix: remove lineHeight whitespace * feat: mobile about * feat: tablet about Fixing Typescript "Cannot find module" for svg assets: [svgr d.ts](gregberge/svgr#551 (comment)) * feat: desktop about

vyachsed closed this as completed Apr 14, 2021

vyachsed reopened this Apr 15, 2021

Sandstedt mentioned this issue May 7, 2021

Webpack 5 support overview facebook/create-react-app#9994

Closed

25 tasks

gupta-ji6 mentioned this issue Jun 16, 2021

Add Social Network Sharing on Issue Page, Upgrade to Next 10.2 and use Webpack 5 scriptified/scriptified.dev#50

Merged

2 tasks

funkeeflow mentioned this issue Jun 18, 2021

Broken in NextJS 11.0 twopluszero/next-images#73

Open

evenstensberg mentioned this issue Jul 16, 2021

[v5] Use webpack 5 asset modules also for svgr facebook/create-react-app#11213

Open

KutnerUri mentioned this issue Jul 18, 2021

Only default export (as string) is available for SVG files runtime after bit start is executed teambit/bit#4462

Closed

gregberge added the question ❓ label Sep 12, 2021

gregberge closed this as completed Nov 28, 2021

samwhale mentioned this issue Feb 1, 2022

Infrastructure: Update build tooling to use webpack v5 GoogleForCreators/web-stories-wp#5792

Merged

JoeDravarol added a commit to JoeDravarol/dine-restaurant that referenced this issue Feb 14, 2023

feat: tablet about

888fd0c

Fixing Typescript "Cannot find module" for svg assets: [svgr d.ts](gregberge/svgr#551 (comment))

chenjiahan mentioned this issue Mar 11, 2024

feat(plugin-svgr): support for react query web-infra-dev/rsbuild#1783

Merged

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Using svgr with webpack 5 #551

Using svgr with webpack 5 #551

vyachsed commented Apr 14, 2021 •

edited

Loading

open-collective-bot bot commented Apr 14, 2021

feRpicoral commented Apr 15, 2021 •

edited

Loading

ssbb commented Apr 17, 2021

jahirfiquitiva commented Apr 29, 2021

gauravkrp commented May 10, 2021 •

edited

Loading

JonasBa commented May 12, 2021 •

edited

Loading

Perni1984 commented May 18, 2021 •

edited

Loading

meetajhu commented May 27, 2021 •

edited

Loading

gupta-ji6 commented Jun 16, 2021

marella commented Jun 17, 2021

njerschow commented Jun 18, 2021

getahead-dev commented Jun 19, 2021

privateOmega commented Jun 20, 2021 •

edited

Loading

mapreal19 commented Jun 29, 2021

allpwrfulroot commented Jun 30, 2021

levymetal commented Jul 20, 2021

renyuns commented Jul 30, 2021

zhimng commented Aug 16, 2021

todorpr commented Sep 2, 2021

gregberge commented Sep 12, 2021

nikhilnayyar2 commented Sep 14, 2021 •

edited

Loading

birdofpreyru commented Nov 2, 2021

ywroh commented Nov 19, 2021

gregberge commented Nov 28, 2021

SuperOleg39 commented Oct 3, 2022

SuperOleg39 commented Oct 3, 2022

Using svgr with webpack 5 #551

Using svgr with webpack 5 #551

Comments

vyachsed commented Apr 14, 2021 • edited Loading

open-collective-bot bot commented Apr 14, 2021

feRpicoral commented Apr 15, 2021 • edited Loading

ssbb commented Apr 17, 2021

jahirfiquitiva commented Apr 29, 2021

gauravkrp commented May 10, 2021 • edited Loading

JonasBa commented May 12, 2021 • edited Loading

Perni1984 commented May 18, 2021 • edited Loading

meetajhu commented May 27, 2021 • edited Loading

gupta-ji6 commented Jun 16, 2021

marella commented Jun 17, 2021

njerschow commented Jun 18, 2021

getahead-dev commented Jun 19, 2021

privateOmega commented Jun 20, 2021 • edited Loading

mapreal19 commented Jun 29, 2021

allpwrfulroot commented Jun 30, 2021

levymetal commented Jul 20, 2021

renyuns commented Jul 30, 2021

zhimng commented Aug 16, 2021

todorpr commented Sep 2, 2021

gregberge commented Sep 12, 2021

nikhilnayyar2 commented Sep 14, 2021 • edited Loading

birdofpreyru commented Nov 2, 2021

ywroh commented Nov 19, 2021

gregberge commented Nov 28, 2021

SuperOleg39 commented Oct 3, 2022

SuperOleg39 commented Oct 3, 2022

vyachsed commented Apr 14, 2021 •

edited

Loading

feRpicoral commented Apr 15, 2021 •

edited

Loading

gauravkrp commented May 10, 2021 •

edited

Loading

JonasBa commented May 12, 2021 •

edited

Loading

Perni1984 commented May 18, 2021 •

edited

Loading

meetajhu commented May 27, 2021 •

edited

Loading

privateOmega commented Jun 20, 2021 •

edited

Loading

nikhilnayyar2 commented Sep 14, 2021 •

edited

Loading