[v5] Use webpack 5 asset modules also for svgr

[raix]

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]',
      },
    },
*/
  ],

[raix]

@evenstensberg input/hints from the webpack team on this one would be great :)

[evenstensberg]

will this help?

• Using svgr with webpack 5 gregberge/svgr#551 (comment)

[raix]

Thanks @evenstensberg so we are still "allowed" to use file-loader. Will have to check if the current config we have is sufficient or if we need to split it using the issuer prop.

[whispersofthedawn]

It might be best to just leave it as file-loader then, I just initially pointed it out because I thought it was no longer going to work or cause a loss due to the note at the top of this page: https://v4.webpack.js.org/loaders/file-loader/

[raix]

@dawnofmidnight no worries, I also tried just using the asset modules due to the documentation, but it didn't work for me - could be a limitation in webpack / the svgr loader or me missing out on some details (lets keep an eye on it)

[marella]

Webpack doesn't seem to support "chaining" asset modules and loaders, so the config posted by raix doesn't work. If there is a way to pass the asset modules output directly to loaders then file-loader (archived) can be replaced completely.

The alternative made by me (new-url-loader) doesn't directly process the assets like file-loader or url-loader. It simply generates URL assets which are processed by asset modules. So it is kind of like a proxy to asset modules and can pass its output to other loaders.

Show config

test: /\.svg$/,
oneOf: [
  {
    // Exclude URL assets from being processed by loaders.
    dependency: { not: ['url'] },
    use: [
      {
        loader: '@svgr/webpack',
        options: {
          prettier: false,
          svgo: false,
          svgoConfig: {
            plugins: [{ removeViewBox: false }],
          },
          titleProp: true,
          ref: true,
        },
      },
      // Generate URL assets which are processed by asset modules.
      'new-url-loader',
    ],
  },
  {
    // Process URL assets using asset modules.
    type: 'asset/resource',
    generator: {
      filename: 'static/media/[name].[hash][ext]',
    },
  },
],

Since CRA config has a catch-all block which uses asset/resource type, above config can be simplified to:

test: /\.svg$/,
dependency: { not: ['url'] },
use: [
  {
    loader: '@svgr/webpack',
    options: {
      prettier: false,
      svgo: false,
      svgoConfig: {
        plugins: [{ removeViewBox: false }],
      },
      titleProp: true,
      ref: true,
    },
  },
  'new-url-loader',
],

[raix]

@marella not sure if could chain eg. Using dependency and maybe issuer to select? (I'll have to read the source to come up with better solutions)

[alexander-akait]

No need to use dirty solution like gregberge/svgr#551 (comment), 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();
}

[alexander-akait]

Both example doesn't violate ECMA modules spec

[gregberge]

Hello here! I am working on the new version of SVGR and I am trying to find the best solution to handle it! For now I don't have one that fits well. As you mentioned chaining is not supported, so the best way do handle it is to use a query, as mentioned here: gregberge/svgr#551 (comment)

I think it would be the recommended way for webpack 5. Also it is better for perf since you will not transpile SVG is you don't need it explicitely.