Next.js中使用CKEditor遇JSX组件类型错误，yarn build失败求助

1. 对齐React类型依赖版本 #

该错误多由@types/react与@types/react-dom版本和CKEditor React组件依赖版本不匹配导致。

• 打开项目package.json，将@types/react和@types/react-dom的版本统一（例如均设为^18.2.0，需适配你项目的React版本）
• 执行命令重新安装依赖：

yarn install

2. 升级CKEditor React包 #

旧版@ckeditor/ckeditor5-react可能存在类型定义缺陷，升级到最新稳定版：

yarn add @ckeditor/ckeditor5-react@latest

3. 优化组件类型声明 #

组件中过多any类型会干扰TypeScript推断，可修正类型定义：

import React from "react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import type { Editor } from "@ckeditor/ckeditor5-core";

interface CKEditorProps {
  data?: string;
  editorChangeHandler?: (event: { editor: Editor }, editorInstance: Editor) => void;
}

function TextEditor({ data, editorChangeHandler }: CKEditorProps) {
  return <CKEditor editor={ClassicEditor} data={data} onChange={editorChangeHandler} />;
}

export default TextEditor;

4. 禁用SSR渲染（可选） #

若错误由Next.js服务端渲染引发，可通过动态导入禁用SSR：

import dynamic from "next/dynamic";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import type { Editor } from "@ckeditor/ckeditor5-core";

const CKEditor = dynamic(() => import("@ckeditor/ckeditor5-react").then(mod => mod.CKEditor), {
  ssr: false
});

interface CKEditorProps {
  data?: string;
  editorChangeHandler?: (event: { editor: Editor }, editorInstance: Editor) => void;
}

function TextEditor({ data, editorChangeHandler }: CKEditorProps) {
  return <CKEditor editor={ClassicEditor} data={data} onChange={editorChangeHandler} />;
}

export default TextEditor;

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