升级至Next.js 15后出现React Fragment错误，如何解决？

以下是除回滚至Next.js 14外的可行解决办法：

• 升级依赖包版本：Shadcn UI和Radix Primitives官方通常会快速适配Next.js新版本，优先检查并升级相关依赖到最新版。执行对应包管理命令：

  # npm 用户
  npm update @radix-ui/react-slot shadcn-ui
  # yarn 用户
  yarn upgrade @radix-ui/react-slot shadcn-ui
  # pnpm 用户
  pnpm update @radix-ui/react-slot shadcn-ui
  

  若组件是通过shadcn CLI安装的，还需同步依赖：

  npx shadcn-ui@latest sync
  

• 自定义高阶组件过滤无效Prop：如果暂时无法升级依赖，可以手动封装组件过滤掉传给Slot/SlotClone的id属性。示例代码：

  // 新建components/ui/slot.jsx
  import { Slot as OriginalSlot } from '@radix-ui/react-slot';
  
  export const Slot = (props) => {
    // 剔除React.Fragment不支持的id属性
    const { id, ...validProps } = props;
    return <OriginalSlot {...validProps} />;
  };
  

  之后将项目中所有引入@radix-ui/react-slot的地方替换为这个自定义组件，也可通过webpack或vite的别名配置实现全局替换，避免逐个修改。

• 临时关闭React严格模式：Next.js 15默认启用严格模式，会强化Prop校验逻辑。可在next.config.js中关闭严格模式临时规避：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    reactStrictMode: false,
  };
  
  module.exports = nextConfig;
  

  注意：此方案仅作为临时过渡手段，长期使用会失去严格模式的代码校验能力，不推荐作为最终解决方案。

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