Next.js中page.tsx无法动态导入组件问题求助

问题背景 #

在Next.js中，组件导入到其他组件时正常，但使用dynamic导入到page.tsx时报错。

导入代码 #

const CodeSampleModal = dynamic(() => import('../../../components/UserFeedbackModal'), {
  ssr: false,
});

报错信息 #

参数类型“() => Promise<typeof import("c:/Users/balci/OneDrive/Masaüstü/feedback-app/src/components/UserFeedbackModal")>”无法赋值给类型“DynamicOptions<{}> | Loader<{}>”。
类型“() => Promise<typeof import("c:/Users/balci/OneDrive/Masaüstü/feedback-app/src/components/UserFeedbackModal")>”无法赋值给类型“() => LoaderComponent<{}>”。
类型“Promise<typeof import("c:/Users/balci/OneDrive/Masaüstü/feedback-app/src/components/UserFeedbackModal")>”无法赋值给类型“LoaderComponent<{}>”。
类型“typeof import("c:/Users/balci/OneDrive/Masaüstü/feedback-app/src/components/UserFeedbackModal")”无法赋值给类型“ComponentType<{}> | ComponentModule<{}>”。

问题原因 #

这个错误核心是动态导入的模块没有导出符合Next.js dynamic要求的组件：

• dynamic默认期望导入的是默认导出的React组件
• 如果组件使用的是命名导出，或者导出内容不是有效的React组件类型，就会触发类型不匹配报错

解决方案 #

方案1：改为默认导出组件 #

检查UserFeedbackModal.tsx的导出方式，确保使用默认导出：

// UserFeedbackModal.tsx
const UserFeedbackModal = () => {
  // 组件逻辑与UI
};

// 默认导出
export default UserFeedbackModal;

方案2：适配命名导出的组件 #

如果组件使用的是命名导出（比如export const UserFeedbackModal = () => {...}），修改动态导入的写法，明确指定要导入的命名组件：

const CodeSampleModal = dynamic(() => 
  import('../../../components/UserFeedbackModal').then(mod => mod.UserFeedbackModal), 
  { ssr: false }
);

额外提示（TypeScript项目） #

如果是TypeScript项目，可以给动态导入的组件添加类型声明，消除类型警告：

// 先导入组件的Props类型
import type { UserFeedbackModalProps } from '../../../components/UserFeedbackModal';

const CodeSampleModal = dynamic<UserFeedbackModalProps>(() => 
  import('../../../components/UserFeedbackModal').then(mod => mod.UserFeedbackModal), 
  { ssr: false }
);

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