NextJs 14中无法使用@react-three/drei的Text组件求助

问题原因 #

drei的Text组件依赖的底层库（typr.js）在模块初始化阶段直接访问了window对象，即使组件加了"use client"，Next.js的服务端打包过程仍会执行这部分代码，导致报错。

解决方法 #

1. 动态导入Text组件（禁用SSR） #

使用Next.js的dynamic函数，只在客户端加载Text组件，避免服务端执行时触发window访问：

import dynamic from 'next/dynamic'

// 动态导入drei的Text组件，禁用服务端渲染
const Text = dynamic(() => import('@react-three/drei').then(mod => mod.Text), {
  ssr: false,
})

之后在Canvas中直接使用这个动态导入的Text组件即可。

2. 确保Canvas所在组件完全客户端化 #

确认包含Canvas的组件顶部已正确添加"use client"指令，避免服务端渲染层级影响：

'use client'

import { Canvas } from '@react-three/fiber'
// 其他导入...

export default function CardComponent() {
  return (
    <Canvas>
      {/* 其他组件 */}
      <Text>你的文本内容</Text>
    </Canvas>
  )
}

3. 条件渲染Text组件（备选方案） #

通过useEffect和状态控制，直到客户端环境就绪后再渲染Text：

'use client'

import { useState, useEffect } from 'react'
import { Canvas } from '@react-three/fiber'
import { Text } from '@react-three/drei'

export default function CardComponent() {
  const [isClient, setIsClient] = useState(false)

  useEffect(() => {
    setIsClient(true)
  }, [])

  return (
    <Canvas>
      {/* 其他组件 */}
      {isClient && <Text>你的文本内容</Text>}
    </Canvas>
  )
}

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