@svgr/webpack compat with webpack5

[CaptainN]

I had an issue with trying to get @svgr/webpack working with the latest rc (6.3-rc.10). Basically, I couldn't get @svgr/webpack to work, even though it worked fine before, and works fine with the latest nextjs (v11).

The issue turned out to be that the default asset loader was taking priority over the configured svgr/webpack loader. I tried modifying the config in two ways - using unshift, and using push. Neither let me override the default. I ended up just hacking the test:

  webpackFinal: (config) => {
    // find and disable the default loader for svg files
    const assetLoader = config.module.rules.find((rule) =>
      rule.test.test(".svg"),
    );
    assetLoader.test =
      /\.(ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/;

Once I did that, the loader worked just fine. Thought I'd share in case anyone has a similar issue, or maybe even has a better way.

Here's my whole config for context (it also has a way to enable readable classnames in storybook output - this should be the default):

  webpackFinal: (config) => {
    // find and disable the default loader for svg files
    const assetLoader = config.module.rules.find((rule) =>
      rule.test.test(".svg"),
    );
    assetLoader.test =
      /\.(ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/;

    // Make class properties readable
    const sassLoader = config.module.rules.find((rule) =>
      rule.test.test(".scss"),
    );
    const i = sassLoader.use.findIndex(
      (ldr) => ldr.loader && /css\-loader/.test(ldr.loader),
    );
    sassLoader.use[i].options = {
      importLoaders: 1,
      url(url, resourcePath) {
        // Disable handling links to static assets in /public
        if (url.startsWith("/")) return false;
        return true;
      },
      modules: {
        compileType: "module",
        mode: "local",
        auto: true,
        exportGlobals: true,
        localIdentName: "[name]__[local]--[hash:base64:5]",
      },
    };

    config.module.rules.unshift({
      test: /\.svg$/,
      oneOf: [
        {
          dependency: { not: ["url"] },
          use: [
            "babel-loader",
            {
              loader: "@svgr/webpack",
              options: {
                svgoConfig: {
                  plugins: [
                    {
                      removeViewBox: false,
                    },
                  ],
                },
              },
            },
            "new-url-loader",
          ],
          issuer: {
            and: [/\.(js|ts)x?|\.(scss|css)$/],
          },
        },
        {
          type: "asset",
        },
      ],
    });
    return config;
  },