如何调试react-contenteditable报错：期望字符串却得到复合对象

问题描述 #

跟着craft.js基础教程创建带可编辑内容的Text元素，教程采用react-contenteditable npm包实现该功能，但项目中使用时持续抛出无法调试的错误。

代码示例 #

import React from "react";
import {Editor, Frame, Element, useNode } from "@craftjs/core";
import { Button } from "@/components/ui/button";
import { Slider } from "@/components/ui/slider";
import { Switch } from "@/components/ui/switch";
import ContentEditable from 'react-contenteditable'
import { cn } from "@/lib/utils";

export const Text = ({ text, fontSize, textAlign }: any) => {
    const {
        connectors: { connect, drag },
        actions: { setProp },
    } = useNode();
    return (
        <div ref={(ref: any) => connect(drag(ref))}>
            <ContentEditable
                html={text}
                onChange={(e) =>
                    setProp(
                        (props: any) =>
                            (props.text = e.target.value.replace(
                                /<\/?[^>]+(>|$)/g,
                                "",
                            )),
                    )
                }
                tagName="p"
                className={`text-[${fontSize}px]`}
            />
        </div>
    );
};


export const Container = ({ background, padding = 0, children }: any) => {
    const {
        connectors: { connect, drag },
    } = useNode();
    return (
        <div
            style={{ margin: "5px 0", background, padding: `${padding}px` }}
            ref={(ref: any) => connect(drag(ref))}
        >
            {children}
        </div>
    );
};

export default function Craft() {
    return (
        <div className="h-screen w-screen">
            <div className="grid h-full w-full grid-flow-col grid-cols-5 grid-rows-[10rem_1fr] items-start justify-start">
                <Editor resolver={{ Text, Container }}>
                    <div className="col-span-4 row-start-2 h-full w-full bg-secondary">
                        <Frame>
                            <Element
                                is={Container}
                                padding={5}
                                background="#eee"
                                canvas
                            >
                                <Text size="small" text="Hi world!" />
                            </Element>
                        </Frame>
                    </div>
                </Editor>
            </div>
        </div>
    );
}

错误信息 #

警告及错误均指向Text组件div内首次使用<ContentEditable>组件的行：

警告：React.jsx: 类型无效——预期是字符串（对应内置组件）或类/函数（对应复合组件），但实际得到：object。
错误：元素类型无效：预期是字符串（对应内置组件）或类/函数（对应复合组件），但实际得到：object。

解决方案 #

• 修正导入方式：react-contenteditable v3及以上版本采用命名导出而非默认导出，将导入语句改为：

  import { ContentEditable } from 'react-contenteditable'
  

• 确认依赖安装：确保已正确安装包，执行命令：

  npm install react-contenteditable
  # 或
  yarn add react-contenteditable
  

• 检查版本兼容性：确认craft.js和react-contenteditable的React版本要求一致，避免版本冲突导致的导出异常。

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