docs: correct the resourceQuery comment in code

[nikhilnayyar002]

Summary

The doc page of webpack has incorrect resourceQuery comment in code section.

module.exports = {
  module: {
    rules: [
      {
        type: 'asset',
        resourceQuery: /url/, // *.svg?react
      },
      {
        test: /\.svg$/i,
        issuer: /\.[jt]sx?$/,
        use: ['@svgr/webpack'],
      },
    ],
  },
}

import svg from './assets/file.svg?url'
import Svg from './assets/file.svg'

const App = () => {
  return (
    <div>
      <img src={svg} width="200" height="200" />
      <Svg width="200" height="200" viewBox="0 0 3500 3500" />
    </div>
  )
}

Changed it from // *.svg?react to // *.svg?url

Test plan

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/gregberge/svgr/2a6AxiPHCLzkio44vgC1CULAWc1x
✅ Preview: https://svgr-git-fork-nikhilnayyar002-patch-2-gregberge.vercel.app

[gregberge]

Thanks!

[nikhilnayyar002]

Also i want to report that the new config of version 6 is still not working correcly for me. So I am still using this code to make things work correctly:

    module: {
        rules: [
            {
                test: /\.(eot|woff|woff2|ttf)$/i,
                type: 'asset/resource'
            },
            {
                test: /\.(png|jpe?g|gif)$/i,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: wmConfig.webpack.inlineAssetMaxSize
                    }
                }
            },
            /** svg
             *  https://react-svgr.com/docs/webpack/#handle-svg-in-css-sass-or-less
             *  https://github.com/gregberge/svgr/issues/551#issuecomment-883073902
             *  https://webpack.js.org/configuration/module/#ruleoneof
             */
            {
                test: /\.svg$/,
                oneOf: [
                    {
                        issuer: /\.[jt]sx?$/,
                        resourceQuery: /react/, // *.svg?react
                        use: ['@svgr/webpack']
                    },
                    {
                        type: 'asset',
                        parser: {
                            dataUrlCondition: {
                                maxSize: wmConfig.webpack.inlineAssetMaxSize
                            }
                        }
                    },
                ],
            },
            /** */
            {
                test: /\.css$/,
                use: [{ loader: 'css-loader' }]
            },
            {
                test: /\.txt$/,
                type: 'asset/source',
            },
            {
                test: /\.s[ac]ss$/i,
                use: [{ loader: 'css-loader' }, { loader: 'sass-loader' }]
            },
        ],
    },

[nikhilnayyar002]

refer to example -
https://github.com/nikhilnayyar002/react-min/tree/svgr-example

react.svg is 5.45 KB

you can also change the value of inline asset size in wm-config.js to see that webpack emit the same svg asset url or inline code for css url import as well as javascript import

const wmConfig = {
   ...
    webpack: {
       ...
        inlineAssetMaxSize: 6 * 1024, // in Bytes     <--- here

import "./index.css";

import React from 'react';
import ReactDOM from 'react-dom';
import svg from './react.svg';
import Svg from './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-svg-sample {
  background-image: url(./react.svg);
  background-size: contain;
  width: 200px;
  height: 200px;
}

when inlined ( inlineAssetMaxSize: 6 * 1024,)

here both css data url and img src data url is same.

when not inlined ( inlineAssetMaxSize: 0 * 1024,)

here both css url and img src url is same.

[nikhilnayyar002]

I am able to reproduce the same output as above by using config provided in docs only when I add resourceQuery: "" to rule 2.

    rules: [
      // rule 1
      {
        test: /\.svg$/i,  
        type: 'asset',
        resourceQuery: /url/, // *.svg?url
      },
      // rule 2
      {
        test: /\.svg$/i,
        issuer: /\.[jt]sx?$/,
        use: ['@svgr/webpack'],
        resourceQuery: ""
      },
    ],

import "./index.css";

import React from 'react';
import ReactDOM from 'react-dom';
import svg from './react.svg?url';
import Svg from './react.svg';

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-svg-sample {
  background-image: url(./react.svg?url);
  background-size: contain;
  width: 200px;
  height: 200px;
}

[nikhilnayyar002]

it seems like both the rules are working for:

import svg from './react.svg?url';

[nikhilnayyar002]

Also note regarding the following config:

react.svg is 5.45 KB

            {
                test: /\.svg$/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 6*1024 // 6KB
                    }
                }
            },

import svg from './react.svg?bar';

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

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

Webpack output same data url for both <img src and background-image: url( regardless of whether we are appending url query (like ?foo, ?bar, ?url etc). This means that our config worked and if we dont pass resourceQuery then webpack does not care and it will emit asset even for paths like: *.svg?url

One thing need to be corrected. In the following (from the docs):

    rules: [
      // rule 1
      {
        type: 'asset',
        resourceQuery: /url/, // *.svg?url
      },
      // rule 2
      {
        test: /\.svg$/i,
        issuer: /\.[jt]sx?$/,
        use: ['@svgr/webpack'],
      },
    ],

rule 1 should be defined as follows:

    rules: [
      // rule 1
      {
        test: /\.svg$/i,  // <-- webpack should also be provided with specific path to test for (here path containing .svg)
        type: 'asset',
        resourceQuery: /url/, // *.svg?url
      },
      // rule 2
    ],

So i conclude that rule 2 (defined for svgr) is also working for path .svg?url