React+Vite+TypeScript项目引入CKEditor自定义构建包报错求助

检查文件路径准确性 #

• 确认解压后的ckeditor5-custom-build文件夹位置：
  • 若放在项目根目录，导入路径要写成相对路径：./ckeditor5-custom-build/build/ckeditor（别漏开头的./）
  • 若放在src目录下，根据App.tsx的位置调整路径，比如../ckeditor5-custom-build/build/ckeditor
• 打开ckeditor5-custom-build/build文件夹，确认存在ckeditor.js或ckeditor.ts文件，文件名不对的话要同步修改导入路径

配置Vite路径解析（按需） #

如果自定义构建包不在Vite默认解析范围内，修改vite.config.ts添加别名配置：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      'ckeditor5-custom-build': './ckeditor5-custom-build' // 指向你的构建包根目录
    }
  }
});

之后导入可简化为import CKEditor from 'ckeditor5-custom-build/build/ckeditor'

核对构建包的package.json #

打开ckeditor5-custom-build/package.json，检查main字段是否指向正确入口：

{
  "main": "./build/ckeditor.js"
}

如果路径错误，改成实际的入口文件路径，Vite会优先读取这个字段作为导入入口

安装构建包依赖 #

进入ckeditor5-custom-build文件夹，执行npm install或pnpm install，确保构建包自身依赖安装完成，避免因依赖缺失导致导入失败

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