[v5] Use webpack 5 asset modules also for svgr

Is your proposal related to a problem?

This issue is related to Webpack 5 and the svg loader part of the configuration. Webpack 5 now use Asset modules to replace raw/url/file loaders.

Most of file loading is already converted into asset modules in the new CRA webpack 5 config but theres on outstanding regarding loading svg.

Describe the solution you’d like

When converting to webpack 5 I didn’t manage to convert the svgr loader setup to be using asset modules, for now it’s using file-loader still. It would be great if it could be converted into the asset module pattern, ideally by setting the asset type instead of using other loaders to be webpack 5 native.

Describe alternatives you’ve considered

@marella mentioned that he did a new-url-loader as an alternative see comment for more details

Additional context

Reading the webpack 5 documentation I would imagine that something like this would have worked: (Also note that we might have to think about url assets maybe thats out of scope for now?)

  test: /\.svg$/,
  use: [
    {
      loader: '@svgr/webpack',
      options: {
        prettier: false,
        svgo: false,
        svgoConfig: {
          plugins: [{ removeViewBox: false }],
        },
        titleProp: true,
        ref: true,
      },
    },
    type: 'asset/resource',
    generator: {
      filename: 'static/media/[name].[hash].[ext]',
    }
/* replacing:
    {
      loader: 'file-loader',
      options: {
        name: 'static/media/[name].[hash].[ext]',
      },
    },
*/
  ],

[alexander-akait]

Both example doesn’t violate ECMA modules spec

[alexander-akait]

No need to use dirty solution like https://github.com/gregberge/svgr/issues/551#issuecomment-864531501, just register loader on resourceQuery: /svgr/ and use import foo from './my.svg?svgr' to import, new-url-loader is wrong solution too, i.e.

module: {
    rules: [
      {
        test: /\.svg$/,
        resourceQuery: /svgr/,
        use: [
          {
            loader: "@svgr/webpack",
          },
        ],
      },
    ],
  },

and use code:

import result from './image.svg?svgr';

console.log(typeof result)

if (module.hot) {
  module.hot.accept();
}

In future we will improve this and will be possible to use:

import result from "./image.svg" assert { type: "@svgr/webpack" };

console.log(typeof result)

if (module.hot) {
  module.hot.accept();
}