Next.js动态导入多导出组件及组件加载顺序问题求助

1. 多导出组件的动态导入错误 #

你当前的动态导入写法不符合Next.js dynamic函数的要求——它期望导入的模块返回默认导出的组件，直接返回命名导出的Select/SelectItem会导致识别失败。

修正后的正确写法：

'use client'
import dynamic from 'next/dynamic';

const Select = dynamic(() => 
  import('@nextui-org/select').then((mod) => ({ default: mod.Select }))
);
const SelectItem = dynamic(() => 
  import('@nextui-org/select').then((mod) => ({ default: mod.SelectItem }))
);

也可以用更直观的异步写法：

'use client'
import dynamic from 'next/dynamic';

const Select = dynamic(async () => {
  const module = await import('@nextui-org/select');
  return { default: module.Select };
});
const SelectItem = dynamic(async () => {
  const module = await import('@nextui-org/select');
  return { default: module.SelectItem };
});

2. Tooltip与Button的加载顺序问题 #

不需要手动控制组件加载顺序，用以下两种方式解决：

方式一：用Suspense包裹组件 #

利用React的Suspense组件等待所有依赖组件加载完成后再渲染，避免因组件未加载完成导致的绑定异常：

'use client'
import dynamic from 'next/dynamic';
import { Suspense } from 'react';

const Button = dynamic(() => 
  import('@nextui-org/button').then((mod) => ({ default: mod.Button }))
);
const Tooltip = dynamic(() => 
  import('@nextui-org/tooltip').then((mod) => ({ default: mod.Tooltip }))
);

// 使用时
<Suspense fallback={<div>加载中...</div>}>
  <Tooltip content="提示文本">
    <Button>按钮</Button>
  </Tooltip>
</Suspense>

方式二：封装成单个动态组件 #

把Tooltip和Button封装到同一个组件中，再动态导入这个组件，确保两者同时加载：

// components/TooltipButton.jsx
'use client'
import { Button } from '@nextui-org/button';
import { Tooltip } from '@nextui-org/tooltip';

export default function TooltipButton({ content, children }) {
  return (
    <Tooltip content={content}>
      <Button>{children}</Button>
    </Tooltip>
  );
}

// 页面中导入使用
'use client'
import dynamic from 'next/dynamic';

const TooltipButton = dynamic(() => import('../components/TooltipButton'));

<TooltipButton content="提示文本">按钮</TooltipButton>

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