next.js server component svg fix

next.config.mjs

const config = {
  // ...
  
  webpack(config) {
    // prevent ehters.js node deps import warnings
    config.externals.push({
      bufferutil: "bufferutil",
      "utf-8-validate": "utf-8-validate",
    });

    config.resolve.fallback = {
      ...config.resolve.fallback,
      fs: false,
    };

    // Grab the existing rule that handles SVG imports
    const builtinFileLoaderRule = config.module.rules.find((rule) =>
      rule.test?.test?.(".svg")
    );
    // summary:
    // import SomeSVG from "~/any.svg" -> string by url loader
    // import SomeSVG from "~/anyIcon.svg" -> React component by svgr
    config.module.rules.push(
      {
        ...builtinFileLoaderRule,
        test: /\.svg$/i,
        exclude: /Icon\.svg$/i,
      },
      {
        test: /Icon\.svg$/i,
        // svgr setup ref: https://github.com/gregberge/svgr/issues/860#issuecomment-1531904399
        issuer: { not: /\.(css|scss|sass)$/ },
        loader: "@svgr/webpack",
        options: {
          titleProp: true,
          icon: true,
          replaceAttrValues: {
            "#000": "currentColor",
          },
        },
      }
    );
    // Modify the file loader rule to ignore *.svg, since we have it handled now.
    builtinFileLoaderRule.exclude = /\.svg$/i;

    return config;
  },
};