Next.js 13 App Router动态导入组件报TypeScript '无法作为JSX组件'错误

以下是针对'SideContent' cannot be used as a JSX component错误的几种可行解决方法：

• 显式指定组件导出类型
  动态导入时TypeScript可能无法正确推断默认导出的组件类型，可手动明确获取default导出：

  const SideContent = dynamic(() => 
    import('src/components/Layout/SideContent').then(mod => ({ default: mod.default }))
  )
  

  若组件是命名导出，需对应调整为获取命名导出项。

• 统一React类型依赖版本
  该错误多因@types/react、@types/react-dom与Next.js版本不兼容导致。Next.js 13要求React类型版本为^18.x.x，执行以下命令统一依赖：

  npm install @types/react@^18.2.0 @types/react-dom@^18.2.0 --save-dev
  

  也可删除node_modules和锁文件后重新安装所有依赖。

• 手动添加组件类型声明
  为动态导入的组件指定明确类型，避免TypeScript推断错误：

  import dynamic from 'next/dynamic';
  import type { SideContentProps } from 'src/components/Layout/SideContent';
  
  const SideContent = dynamic<React.FC<SideContentProps>>(() => 
    import('src/components/Layout/SideContent')
  );
  

  需确保SideContent组件已导出对应的Props类型。

• 检查组件导出方式
  确认SideContent组件为正确的默认导出：

  // src/components/Layout/SideContent.tsx
  export default function SideContent() {
    // 组件逻辑
  }
  

  若为命名导出，动态导入时需对应获取命名导出的组件：

  const SideContent = dynamic(() => 
    import('src/components/Layout/SideContent').then(mod => ({ default: mod.SideContent }))
  )
  

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