Next.js中使用SVG组件报错：Element type is invalid

问题根源 #

Next.js默认导入SVG文件时，会将其解析为静态资源路径（字符串/对象），而非React组件。你直接把这个路径当作组件使用，就会触发"expected a string (for built-in components) or a class/function (for composite components) but got: object"错误。

另外你的代码还有两处笔误：

• emoji.js中未导入Rocket组件，却在DEFAULT_EMOJI_OPTIONS中使用了它
• EmojiSection.js中useDocument的解构赋值写错，应该是const { document: reactions } = useDocument(...)（原代码写的是reaction）

解决方案一：使用next/image展示SVG（无需修改SVG内部） #

如果只是需要展示SVG，不需要操作其内部元素，用Next.js自带的Image组件最方便：

1. 修改Emoji.js：

import Image from 'next/image';

const Emoji = ({ reactions, emoji }) => {
  return (
    <span>
      <Image 
        src={emoji.emoji} 
        alt={emoji.label} 
        width={64} 
        height={64} 
        className="w-16 h-16" 
      />
    </span>
  )
}

export default Emoji

2. 在next.config.js中配置允许SVG格式：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    formats: ['image/webp', 'image/svg+xml'],
  },
}

module.exports = nextConfig

解决方案二：将SVG作为React组件导入（支持修改内部元素） #

如果需要自定义SVG的颜色、样式等内部属性，需要配置Webpack将SVG解析为React组件：

1. 安装依赖：

npm install @svgr/webpack
# 或
yarn add @svgr/webpack

2. 修改next.config.js添加Webpack规则：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    });
    return config;
  },
};

module.exports = nextConfig;

3. 修正emoji.js的缺失导入：

import ClappingHand from "../assets/emojiIcons/clappingHand.svg"
import Coin from "../assets/emojiIcons/coin.svg"
import Rocket from "../assets/emojiIcons/rocket.svg" // 补上缺失的Rocket导入
import Medal from "../assets/emojiIcons/medal.svg"

const DEFAULT_EMOJI_OPTIONS = [
  {
    emoji: Rocket,
    label: "rocket",
    slug: "rocket",
  },
  {
    emoji: Coin,
    label: "coin",
    slug: "coin",
  },
  {
    emoji: ClappingHand,
    label: "clapping hand",
    slug: "clapping-hand",
  },
  {
    emoji: Medal,
    label: "medal",
    slug: "medal",
  }
]

export { DEFAULT_EMOJI_OPTIONS }

4. 此时Emoji.js的原有代码即可正常工作，因为emoji.emoji已经是合法的React组件：

const Emoji = ({ reactions, emoji }) => {
  return (
    <>
      <span>
        <emoji.emoji className="w-16 h-16" />
      </span>
    </>
  )
}

export default Emoji

内容的提问来源于stack exchange，提问作者r121