Cannot use svg-url-loader for svg files using the onCreateWebpackConfig api

[RafidMuhymin]

I am trying to use 'svg-url-loader' instead of 'url-loader' for svg files. I have installed it, and it works with webpack-inline-loaders. But to avoid repeating the process, I decided to use the onCreateWebpackConfig API to change the loader for svg files. I added the below code in gatsby-node.js. But the website is now not displaying any svg image but alt text. The src attribute of the img tag is using a faulty base64 encoded image and not the utf8 encoded svg xml tag.

exports.onCreateWebpackConfig = ({ stage, getConfig, rules, loaders, plugins, actions, }) => { actions.setWebpackConfig({ module: { rules: [ { test: /\.svg/, use: { loader: "svg-url-loader", options: { limit: 4096, iesafe: true, }, }, }, ], }, }); };

The console is not logging any errors. I have created a local plugin at the /plugins dir, but it doesn't work also. I am developing my site on my local machine and building it using Gatsby Cloud. The problem persists in both places. Any help will be appreciated. Thank you.

Here's the link to the minimal repro.

Environment

System: OS: Windows 10 10.0.19042 CPU: (4) x64 Intel(R) Core(TM) i3-5010U CPU @ 2.10GHz Binaries: Node: 15.11.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.10 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 7.6.0 - C:\Program Files\nodejs\npm.CMD Languages: Python: 2.7.15 - C:\Users\Mariam-Rafid\.windows-build-tools\python27\python.EXE Browsers: Edge: Spartan (44.19041.1023.0), Chromium (91.0.864.54) npmPackages: gatsby: ^3.5.1 => 3.7.2 gatsby-background-image: ^1.5.3 => 1.5.3 gatsby-plugin-canonical-urls: ^3.7.1 => 3.7.1 gatsby-plugin-catch-links: ^3.6.0 => 3.7.1 gatsby-plugin-csp: ^1.1.3 => 1.1.3 gatsby-plugin-feed: ^3.6.0 => 3.7.1 gatsby-plugin-gatsby-cloud: ^2.4.1 => 2.7.1 gatsby-plugin-image: ^1.3.0 => 1.7.1 gatsby-plugin-manifest: ^3.3.0 => 3.7.1 gatsby-plugin-mdx: ^2.5.1 => 2.7.1 gatsby-plugin-nprogress: ^3.6.0 => 3.7.1 gatsby-plugin-offline: ^4.5.1 => 4.7.1 gatsby-plugin-postcss: ^4.3.0 => 4.7.1 gatsby-plugin-preact: ^5.4.0 => 5.7.1 gatsby-plugin-purgecss: ^6.0.1 => 6.0.2 gatsby-plugin-react-helmet-async: ^1.2.0 => 1.2.0 gatsby-plugin-robots-txt: ^1.6.2 => 1.6.2 gatsby-plugin-sass: ^4.3.0 => 4.7.1 gatsby-plugin-sharp: ^3.3.0 => 3.7.1 gatsby-plugin-sitemap: ^4.1.0 => 4.3.1 gatsby-plugin-webpack-bundle-analyser-v2: ^1.1.22 => 1.1.22 gatsby-remark-autolink-headers: ^4.2.0 => 4.4.1 gatsby-remark-embed-snippet: ^6.2.0 => 6.4.1 gatsby-remark-images: ^5.2.1 => 5.4.1 gatsby-remark-prismjs: ^5.2.1 => 5.4.1 gatsby-remark-smartypants: ^4.2.0 => 4.4.1 gatsby-source-contentful: ^5.5.0 => 5.7.1 gatsby-source-filesystem: ^3.3.0 => 3.7.1 gatsby-transformer-json: ^3.6.0 => 3.7.1 gatsby-transformer-remark: ^4.0.0 => 4.4.1 gatsby-transformer-sharp: ^3.3.0 => 3.7.1

flags in gatsby-config.js

PRESERVE_WEBPACK_CACHE: true, PRESERVE_FILE_DOWNLOAD_CACHE: true, FAST_DEV: true, PARALLEL_SOURCING: true, LMDB_STORE: true,

[RafidMuhymin]

The problem here is that to use a custom loader in any framework, you have to disable the default loader first. Then you'll be able to add your custom loader. So, first, you have to disable the default, 'url-loader' and then set the 'svg-url-loader' for SVG files. I forgot to do that.

`exports.onCreateWebpackConfig = ({
stage,
getConfig,
rules,
loaders,
plugins,
actions,
}) => {
const config = getConfig();

  config.module.rules.find(
    (rule) =>
      rule.test &&
      rule.test.toString() ===
        "/\\.(ico|svg|jpg|jpeg|png|gif|webp|avif)(\\?.*)?$/"
  ).test = /\.(ico|jpg|jpeg|png|gif|webp|avif)(\?.*)?$/;

  config.module.rules.push({
    test: /\.svg/,
    use: {
      loader: "svg-url-loader",
      options: {
        limit: 4096,
        iesafe: true,
      },
    },
  });

  actions.replaceWebpackConfig(config);  
};

`

Now it works fine.