使用SVGR处理SVG组件时next build失败，提示Unsupported Server Component type

我帮你分析下这个问题，你遇到的报错其实是Next.js App Router里Server Component的序列化限制导致的，先把你的问题场景理清楚：

你的代码与配置情况 #

页面组件代码 #

import * as Brands from '@/components/icons/brands'

export async function Signup() {
  const provider = { name: 'Google', icon: Brands.Google, id: 'google' }
  return <provider.icon />
}

brands.ts 导出文件 #

import Discord from './discord.svg'
import GitHub from './github.svg'
import Google from './google.svg'
import Microsoft from './microsoft.svg'
import Reddit from './reddit.svg'

export { Google, Reddit, GitHub, Discord, Microsoft }

SVG示例（google.svg） #

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="10 10 19.6 20" width="24" height="24">
    <path d="M29.6 20.2273C29.6 19.5182 29.5364 18.8364 29.4182 18.1818H20V22.05H25.3818C25.15 23.3 24.4455 24.3591 23.3864 25.0682V27.5773H26.6182C28.5091 25.8364 29.6 23.2727 29.6 20.2273Z" fill="#4285F4" />
    <path d="M20 30C22.7 30 24.9636 29.1045 26.6181 27.5773L23.3863 25.0682C22.4909 25.6682 21.3454 26.0227 20 26.0227C17.3954 26.0227 15.1909 24.2636 14.4045 21.9H11.0636V24.4909C12.7091 27.7591 16.0909 30 20 30Z" fill="#34A853" />
    <path d="M14.4045 21.9C14.2045 21.3 14.0909 20.6591 14.0909 20C14.0909 19.3409 14.2045 18.7 14.4045 18.1V15.5091H11.0636C10.3864 16.8591 10 18.3864 10 20C10 21.6136 10.3864 23.1409 11.0636 24.4909L14.4045 21.9Z" fill="#FBBC04" />
    <path d="M20 13.9773C21.4681 13.9773 22.7863 14.4818 23.8227 15.4727L26.6909 12.6045C24.9591 10.9909 22.6954 10 20 10C16.0909 10 12.7091 12.2409 11.0636 15.5091L14.4045 18.1C15.1909 15.7364 17.3954 13.9773 20 13.9773Z" fill="#E94235" />
</svg>

next.config.mjs 配置 #

/** @type {import('next').NextConfig} */
export default {
    experimental: {
        turbo: {
            rules: {
                '*.svg': {
                    loaders: ['@svgr/webpack'],
                    as: "*.js",
                }
            }
        }
    }
};

SVGR版本："@svgr/webpack": "^8.1.0"

开发模式一切正常，TypeScript也能正确识别组件，但执行next build时就会反复抛出这个错误：

(venv) iktpwsl@iktp:~/code/personal/wsd/wsd-frontend$ npm run build

> wsd-frontend@0.1.0 build
> next build

  ○ Next.js 14.2.16
  - Experiments (use with caution):
    ⚠ turbo

(node:326292) Warning: Setting the NODE_TLS_REJECT_UNAUTHORIZED environment variable to '0' makes TLS connections and HTTPS requests insecure by disabling certificate verification.
(Use `node --trace-warnings ...` to show where the warning was created)
   Creating an optimized production build ...
(node:326617) Warning: Setting the NODE_TLS_REJECT_UNAUTHORIZED environment variable to '0' makes TLS connections and HTTPS requests insecure by disabling certificate verification.
(Use `node --trace-warnings ...` to show where the warning was created)
 ✓ Compiled successfully
 ✓ Linting and checking validity of types
 ✓ Collecting page data
   Generating static pages (0/13)  [    ]Error: Unsupported Server Component type: {...}
    at e (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:137966)
    at ek (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:138016)
    at Object.toJSON (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:135626)
    at stringify (<anonymous>)
    at eP (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:142090)
    at eE (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:142569)
    at Timeout._onTimeout (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:135346)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7) {
  digest: '3007206190'
}

问题根源 #

这个报错的核心在于：你在Server Component里把React组件（通过SVGR转译后的SVG）存到了普通对象中，然后尝试动态渲染。Next.js的Server Component在构建或服务端渲染时会被序列化（转换成JSON格式），但React组件本身是函数/对象，无法被序列化，所以就触发了这个错误。

解决方案 #

给你几个实用的解决办法，选适合你的就行：

方案1：把页面改成Client Component #

最简单的办法就是给Signup组件加上'use client'指令，让它成为客户端组件，这样就不受Server Component的序列化限制了：

'use client'
import * as Brands from '@/components/icons/brands'

export async function Signup() {
  const provider = { name: 'Google', icon: Brands.Google, id: 'google' }
  return <provider.icon />
}

方案2：避免在对象中存储组件（保持Server Component） #

如果你需要让Signup继续作为Server Component，可以调整代码结构，不要把SVG组件存在对象里，直接通过映射或条件判断渲染：

import * as Brands from '@/components/icons/brands'

export async function Signup() {
  // 如果是固定渲染Google图标，直接写就行
  return <Brands.Google />

  // 如果是动态切换不同provider，用这种方式
  // const providerId = 'google' // 可以是动态获取的值
  // const Icon = Brands[providerId as keyof typeof Brands]
  // return <Icon />
}

方案3：调整SVG导入方式 #

有时候SVGR的Turbo配置可能导致组件处理有问题，你可以尝试在导入SVG时加上?react后缀，明确告诉Next.js把SVG转成React组件：

// brands.ts
import Discord from './discord.svg?react'
import GitHub from './github.svg?react'
import Google from './google.svg?react'
import Microsoft from './microsoft.svg?react'
import Reddit from './reddit.svg?react'

export { Google, Reddit, GitHub, Discord, Microsoft }

这样处理后，SVG组件会被正确识别，也能避免序列化的问题。

备注：内容来源于stack exchange，提问作者Işık Kaplan