Vite 5升级后引入CKEditor 5遇TypeError: __require.resolve不是函数求助

• 使用createRequire替代全局require
  在vite.config.ts顶部引入Node的createRequire方法，手动创建CJS风格的require函数，解决__require.resolve is not a function错误：

import { defineConfig } from 'vite';
import { createRequire } from 'node:module';

// 基于当前模块路径创建require实例
const require = createRequire(import.meta.url);

// 正常使用require.resolve引入CKEditor插件
const CKEditorVitePlugin = require('@ckeditor/ckeditor5-vite-plugin');

export default defineConfig({
  plugins: [
    CKEditorVitePlugin({
      // 插件配置
    })
  ]
});

• 强制预构建CKEditor依赖
  在Vite配置中优化依赖处理，确保CKEditor的CJS模块被正确转译：

export default defineConfig({
  optimizeDeps: {
    // 列出所有用到的CKEditor核心包
    include: [
      '@ckeditor/ckeditor5-core',
      '@ckeditor/ckeditor5-editor-classic',
      '@ckeditor/ckeditor5-essentials',
      // 其他你项目中使用的CKEditor插件
    ],
    esbuildOptions: {
      loader: { '.js': 'js' },
      resolveExtensions: ['.js', '.json']
    }
  },
  ssr: {
    // 不对CKEditor包做外部化处理，确保转译完整
    noExternal: ['@ckeditor/*']
  }
});

• 临时使用CKEditor ESM预览版本
  如果项目可以接受测试版依赖，可以安装CKEditor的ESM预览分支（部分包已支持ESM）：

npm install @ckeditor/ckeditor5-editor-classic@next

注意此版本可能存在不稳定情况，仅建议测试环境使用。

• 应急方案：保留CJS配置文件
  若上述方案不适用，可临时切换回CJS配置模式：

1. 将vite.config.ts重命名为vite.config.cjs
2. 删除package.json中的"type": "module"字段
3. 构建时指定配置文件：

vite build --config vite.config.cjs

此方案会保留Vite CJS API的警告，但能保证CKEditor正常工作，直到官方ESM支持合并。

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