Next.js 13服务端组件导入多客户端组件报错问题咨询

结论 #

这不是Next.js的预期行为，你的导入逻辑本身没有错误，该报错是Next.js处理单个use client文件中多命名导出并被服务端组件导入时的兼容性问题。

问题原因 #

'use client'指令作用于整个文件，标记该文件内所有导出组件为客户端组件，服务端组件本应可以正常导入。但在部分Next.js版本中，服务端组件导入同一use client文件的多个命名导出时，打包序列化流程会出现异常，触发SyntaxError: Unexpected token u in JSON at position 0错误。

解决方案 #

方案1：统一导出对象（无需拆分文件） #

在test.jsx中把多个组件打包成一个对象导出，服务端组件导入后再解构：

'use client'
import React from 'react'

function Test1() {
  return <div>test1</div>
}

function Test2() {
  return <div>test2</div>
}

export const ClientComponents = { Test1, Test2 }

服务端组件中使用：

import { ClientComponents } from '@/components/test'
const { Test1, Test2 } = ClientComponents

方案2：升级Next.js版本 #

该问题在Next.js 13.4及后续部分稳定版本中已被修复，升级到最新稳定版可直接解决。

方案3：拆分文件（你当前使用的临时方案） #

将每个客户端组件单独放在一个文件中，使用默认导出，这种方式兼容性最好，适用于所有Next.js版本。

关于默认导出写法的澄清 #

你注释的export default function Test1()写法本身是完全合法的，不会导致报错，可能是测试时的其他环境问题引发误解。正确写法示例：

'use client'
import React from 'react'

export default function Test1() {
  return <div>test1</div>
}

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