Next.js动态导入CKEditor4报错：require未定义

问题原因 #

• Webpack生产构建的兼容机制：Next.js依赖的Webpack在生产打包时，会通过require.resolveWeak实现动态模块的路径解析，这是其内部为兼容CommonJS模块保留的逻辑，即便项目配置为ES Modules，特定场景下仍会生成这类代码。
• 依赖库的模块格式：ckeditor4-react同时提供了CommonJS和ES Modules两种分发格式，生产构建时Webpack可能优先选择了CommonJS版本，进而触发了require相关代码的生成。
• 开发与生产模式的解析差异：本地开发时Webpack采用开发模式，模块解析逻辑更宽松，不会强制生成这类兼容代码，因此不会出现报错。

解决方案 #

• 直接导入ES Modules版本：修改动态导入语句，指定库的ES模块入口文件：

  const LazyCKEditor4 = dynamic(
    async () => (await import('ckeditor4-react/dist/ckeditor-react.es.js')).CKEditor
  );
  

• 调整Webpack模块解析优先级：在next.config.js中配置Webpack优先解析ES Modules：

  module.exports = {
    webpack: (config) => {
      config.resolve.mainFields = ['module', 'main'];
      return config;
    },
  };
  

• 确认项目ES Modules配置：检查项目根目录package.json，确保设置了type: module：

  {
    "type": "module"
  }
  

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