reactjs 如何让磷光体React图标与NextJS服务器端组件一起工作?

x8diyxa7  于 2023-06-05  发布在  React
关注(0)|答案(1)|浏览(104)

Next.js现在建议我们使用App Dir,但是,由于现在默认情况下所有内容都是在服务器端呈现的,所以我们应该把所有需要交互的内容放在带有“Use Client”标志的组件上。
问题是Phosphor React Icons在服务器端渲染时会抛出错误,我不知道如何让它工作,因为它被用在一些组件中,而在客户端渲染是没有意义的,我是否应该为我使用的每个图标创建组件,仅用于 Package 每个图标在“use client”中?
当在服务器端渲染组件或页面中使用磷光体React图标时,我会得到以下错误:

Maybe one of these should be marked as a client entry with "use client":
  ./node_modules\@phosphor-icons\react\dist\lib\context.es.js
  ./node_modules\@phosphor-icons\react\dist\index.es.js
  ./src\app\page.tsx

将每个图标 Package 在客户端组件中是正确的解决方案吗?

ecfsfe2w

ecfsfe2w1#

不知道这是不是最好的解决方案,但这是我目前正在使用的:
我在src/assets/icons/创建了一个文件夹
在这个文件夹中,我为每个我想要使用的图标创建一个文件,并像这样导出它们:

// assets/icons/MagnifyingGlass.tsx

'use client'

import { MagnifyingGlass } from '@phosphor-icons/react'

export default MagnifyingGlass

每当我想使用它们时,我都会从这个资产文件夹中导入它们。

相关问题