NextJS项目动态导入SVG报错、页面白屏该如何解决？

问题根源 #

你遇到的报错是因为两个配置冲突导致SVG导入结果异常：

• next-fonts 配置的 enableSvg: true 会默认将SVG文件转译为base64资源字符串
• 你自行添加的@svgr/webpack规则会将SVG转译为React组件
  两套规则同时作用下，动态导入拿到的是base64字符串而非React组件，React尝试将base64字符串作为HTML标签解析，自然报出大小写不合法的错误，最终触发页面崩溃白屏。

修复步骤 #

1. 调整next.config.js配置 #

关闭next-fonts自带的SVG处理能力，避免规则冲突，仅保留@svgr/webpack对SVG的转译：

const withFonts = require('next-fonts');
const withTM = require('next-transpile-modules');

module.exports = withTM(
  withFonts({
    useFileSystemPublicRoutes: false,
    enableSvg: false, // 将此处参数从true改为false
    webpack(config) {
      config.module.rules.push({
        test: /\.svg$/,
        issuer: /\.[jt]sx?$/, // 仅处理JS/TS文件中导入的SVG，避免样式文件中SVG引用异常
        use: [
          {
            loader: '@svgr/webpack',
            options: {
              svgoConfig: {
                plugins: {
                  removeViewBox: false,
                },
              },
            },
          },
        ],
      });

      return config;
    },
    assetPrefix: '/_react',
    transpileModules: [
      'swiper',
      'dom7',
      'query-string',
      'strict-uri-encode',
      'split-on-first',
      'set-harmonic-interval',
    ],
  }),
);

2. 修正动态导入代码 #

@svgr/webpack转译的SVG组件为默认导出，动态导入时需要显式读取模块的default属性才能拿到正确的组件实例：

export const Chevron = dynamic(
  () => import('./Icons/chevron.svg').then(mod => mod.default), // 补充then回调取default导出
  {
    loading: () => <span/>,
    ssr: false,
  }
)

3. 重启开发服务 #

修改配置后需要清除缓存并重启开发服务，确保新配置生效：

rm -rf .next && npm run dev

验证效果 #

重启后即可正常动态导入SVG组件，不会再出现白屏和大小写报错问题，SVG仅在使用到对应组件时才会加载，不会被打包进初始HTML资源，符合性能优化的预期。

内容的提问来源于stack exchange，提问作者Floris de Graaff