无法解决从“src/App.tsx”导入“ckeditor5-custom-build/build/ckeditor”的问题。文件存在吗？

Question

我正在尝试将使用 Ckeditor 在线构建器构建的自定义构建添加到 React + vite 应用程序中。我也用打字稿

我解压了下载的文件，并尝试从构建中导入自定义编辑器后，出现了上述错误。

Answer 1

首先确保运行

npm i ./ckeditor-custom-build

Vite 要求链接包必须是 ESM，不幸的是，CKEditor 版本还不是 ESM。

在此处阅读更多相关信息 - 有关 vite 的 Ckeditor 文档和有关链接依赖项的 Vite 文档。

这是我的解决方案：

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: ['ckeditor5'],
  },
  build: {
    commonjsOptions: {
      include: [/ckeditor5/, /node_modules/],
    }
  }
})