React集成GrapesJS初始化报错：Cannot assign to read only property 'defaults'

错误核心原因 #

该错误是因为GrapesJS在初始化过程中尝试修改只读配置对象的defaults属性导致的，常见触发场景包括：

• 传入的styleManager/layerManager等配置对象被冻结或来自不可修改的模块导出
• React组件重复初始化编辑器但未清理旧实例，引发内部状态冲突
• 第三方插件与当前GrapesJS版本不兼容

具体解决方案 #

1. 深拷贝只读配置对象 #

如果styleManager、layerManager等配置是外部导入的只读对象，通过深拷贝生成可修改的副本：

// 在geditorConfig函数内、初始化编辑器前添加
const styleManagerCopy = JSON.parse(JSON.stringify(styleManager));
const layerManagerCopy = JSON.parse(JSON.stringify(layerManager));
const traitManagerCopy = JSON.parse(JSON.stringify(traitManager));
const selectorManagerCopy = JSON.parse(JSON.stringify(selectorManager));
const panelsCopy = JSON.parse(JSON.stringify(panels));
const deviceManagerCopy = JSON.parse(JSON.stringify(deviceManager));

// 初始化时使用拷贝后的对象
const editor = grapesjs.init({
  // ...其他配置
  styleManager: styleManagerCopy,
  layerManager: layerManagerCopy,
  traitManager: traitManagerCopy,
  selectorManager: selectorManagerCopy,
  panels: panelsCopy,
  deviceManager: deviceManagerCopy,
  // ...其他配置
});

若配置包含函数，JSON深拷贝会丢失函数逻辑，可改用lodash.cloneDeep替代。

2. 清理旧编辑器实例，避免重复初始化 #

修改Editor组件的useEffect，添加清理函数销毁旧编辑器，防止重复初始化引发的状态冲突：

useEffect(() => {
  let currentEditor = null;
  // 确保assets和pageId有效再初始化
  if (Array.isArray(assets) && assets.length > 0 && pageId) {
    currentEditor = geditorConfig(assets, pageId);
    setEditor(currentEditor);
  }

  // 组件卸载或依赖变化时销毁旧编辑器
  return () => {
    if (currentEditor) {
      currentEditor.destroy();
    }
  };
}, [pageId, assets]);

3. 排查第三方插件兼容性 #

逐个禁用plugins数组中的插件，重新初始化编辑器，定位是否由某款插件导致冲突：

// 先注释所有插件，逐个开启排查
plugins: [
  // tailwindComponent,
  // gjsBlockBasic,
  // swiperComponent,
  // grapesjsBlockBootstrap,
  // grapesjsPluginExport,
  // grapesjsStyleBg,
  // chartLibComponent,
],

找到冲突插件后，升级插件版本或替换为兼容插件。

4. 移除React渲染周期外的DOM操作 #

geditorConfig开头的jQuery DOM清空操作会干扰React的DOM管理，将其移至React组件的useEffect中：

// 在Editor组件中添加ref
const blocksRef = useRef(null);
const stylesContainerRef = useRef(null);
const layersContainerRef = useRef(null);
const traitContainerRef = useRef(null);

// 在组件return的对应元素上绑定ref
<div id="blocks" ref={blocksRef}></div>
<div id="styles-container" ref={stylesContainerRef}></div>
<div id="layers-container" ref={layersContainerRef}></div>
<div id="trait-container" ref={traitContainerRef}></div>

// 添加useEffect处理DOM清空
useEffect(() => {
  // 批量清空容器
  [blocksRef, stylesContainerRef, layersContainerRef, traitContainerRef].forEach(ref => {
    if (ref.current) ref.current.innerHTML = '';
  });
}, [pageId, assets]);

同时删除geditorConfig开头的所有jQuery清空代码。

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