Angular 17升级后@ckeditor/ckeditor5-build-classic动态require不支持问题求助

问题核心 #

Angular 17默认使用Vite作为构建工具，而Vite不支持CommonJS格式的动态require()语法，这是触发该错误的根本原因。以下是针对性解决步骤：

1. 替换动态require为ES模块导入 #

找到项目中使用require("@ckeditor/ckeditor5-build-classic")的代码位置，按场景替换：

• 静态导入（推荐）：

  import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
  

• 动态懒加载场景：改用ES标准的动态import()语法：

  async loadEditor() {
    const { default: ClassicEditor } = await import('@ckeditor/ckeditor5-build-classic');
    // 后续编辑器初始化逻辑
  }
  

2. 确保CKEditor依赖与Angular 17兼容 #

更新CKEditor Angular插件至最新兼容版本：

npm install @ckeditor/ckeditor5-angular@latest

同时检查所有@ckeditor/ckeditor5-*核心依赖版本保持一致，避免版本冲突。

3. 配置Vite兼容CommonJS依赖（可选） #

如果无法完全替换动态require，可在vite.config.ts中添加优化配置，强制Vite处理CKEditor的CommonJS模块：

import { defineConfig } from 'vite';
import angular from '@angular-devkit/build-angular/src/builders/dev-server/vite-plugin';

export default defineConfig({
  plugins: [angular()],
  optimizeDeps: {
    include: ['@ckeditor/ckeditor5-build-classic'],
    esbuildOptions: {
      loader: {
        '.js': 'jsx',
      },
    },
  },
});

4. 清理缓存并重新构建 #

执行以下命令清除旧缓存与依赖，确保新配置生效：

# 删除依赖与锁文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install
# 清除Angular缓存
ng cache clean
# 重启开发服务
ng serve

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