如何在Next.js中从同一文件一次性动态导入多个模块？

为什么原写法报错 #

next/dynamic返回的是一个React组件包装器，而非普通的模块对象。你尝试直接解构这个包装器，相当于对一个React组件进行对象解构，自然会报错——因为组件本身不包含Heading、CustomError这些属性。

解决方案 #

方法1：使用useState+useEffect手动处理异步导入 #

通过React状态管理，先异步加载整个样式模块，再在组件内部解构使用：

import { useState, useEffect } from 'react';

function YourComponent() {
  const [styleModule, setStyleModule] = useState(null);

  useEffect(() => {
    // 异步导入整个样式模块
    import('./style').then(module => setStyleModule(module));
  }, []);

  // 模块未加载完成时，可返回加载占位符
  if (!styleModule) return <div>Loading...</div>;

  // 解构出需要的样式组件
  const { Heading, CustomError } = styleModule;

  return (
    <div>
      <Heading>示例标题</Heading>
      <CustomError>错误提示</CustomError>
    </div>
  );
}

export default YourComponent;

方法2：封装动态导入的包装组件 #

创建专门的包装组件，用dynamic加载整个样式模块，再通过函数子组件传递导出的样式组件：

1. 新建StyleComponentsWrapper.js：

import dynamic from 'next/dynamic';

// 动态导入整个样式模块
const StyleComponentsWrapper = dynamic(() => import('./style'), {
  ssr: false,
  loading: () => <div>Loading styles...</div> // 自定义加载状态
});

export default StyleComponentsWrapper;

2. 在业务组件中使用：

import StyleComponentsWrapper from './StyleComponentsWrapper';

function YourComponent() {
  return (
    <StyleComponentsWrapper>
      {({ Heading, CustomError }) => (
        <div>
          <Heading>示例标题</Heading>
          <CustomError>错误提示</CustomError>
        </div>
      )}
    </StyleComponentsWrapper>
  );
}

export default YourComponent;

注意事项 #

• 两种方法都保留了ssr: false的配置，适配你的需求；
• 方法1更灵活，适合在单个组件内直接使用；方法2适合多个组件共享这些样式组件的场景，避免重复编写导入逻辑。

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