I’m using Nextjs 14.x, with its Webpack bundler.

I usually want to import SVGs as components, so I’m using @svgr/webpack. I’ve configured it like this in next.config.js:

config.module.rules.push({
  test: /.svg$/,
  resourceQuery: /react/, // *.svg?react
  issuer: { not: /.(css|scss|sass)$/ },
  use: [
    {
      loader: "@svgr/webpack",
      options: {
        svgoConfig: {
          plugins: [
            {
              name: "preset-default",
              params: {
                overrides: {
                  removeViewBox: false,
                },
              },
            },
          ],
        },
      },
    },
  ],
});

That’s been working fine to import SVGs with a ?react suffix, like import MySvg from "./my-svg.svg?react";.

The default image loader is also working fine when I import eg a PNG or jpeg, like import pngData from "./my-png.png";.

But if I import an SVG without the ?react suffix (import svgData from "./my-svg.svg";) I expected the default image loader to still work, and give me an object with a URL to the bundled asset, etc. However, it doesn’t. It gives me an error, saying “currently no loaders are configured to process this file”.

I know that loader is there, because PNGs etc import properly. And I see it if in next.config.js I log out all the loaders before or after I append mine.

If I remove my SVGR loader, SVGs import with the image loader just fine, so they must be conflicting in some way. But I don’t understand how, since the resourceQuery is supposed to keep the two rules separate.

I have tried adding /react/ to the resourceQuery.not list the image loader rule has, in an attempt to separate them even more, but this didn’t help.

const imageLoaderRule = config.module.rules.find((rule) => rule.loader === "next-image-loader");
if (imageLoaderRule == null) {
  throw new Error("Image loader rule not found");
}
imageLoaderRule.resourceQuery.not.push(/react/);

I have also tried using unshift rather than push so that the rules are in the opposite order, and this made no difference either.

config.module.rules.unshift({

And I’ve tried both together.

I don’t know how to tell whether this is me misconfiguring webpack, or if Next is doing some magic and “helpfully” detecting my SVG loader and getting its own SVG loader out of the way.

Any ideas?