GrapesJS自定义组件开发报ReferenceError: Cannot access 'dtime' before initialization

你遇到的 ReferenceError: Cannot access 'dtime' before initialization 报错由以下两点原因导致：

• 核心触发原因是JavaScript的暂时性死区规则：使用const、let关键字声明的变量不存在变量提升，在代码执行到变量声明语句之前，访问该变量都会抛出引用错误。你代码中先在editor.Components.addType的配置项里引用了dtime变量，之后才用const完成dtime的声明，顺序颠倒直接触发了该报错。
• 额外隐藏问题：你当前的写法不符合GrapesJS带JS逻辑组件的开发规范，即使修复了变量顺序问题，写入defaults的dtime函数也不会自动执行，组件渲染后无法正常显示日期。

方案1：基础修复（仅解决报错） #

直接调整变量声明顺序，把dtime的定义移到所有引用它的代码之前即可消除报错：

// Date time
// 先声明dtime变量
const dtime = function() {
    const dt = new Date();
    document.getElementById("demo").innerHTML = dt;
};

// 再定义自定义组件
editor.Components.addType('comp-with-js', {
    model: {
        defaults: {
            dtime,
        }
    }
});

// 最后添加块
editor.Blocks.add('test-block', {
    label: 'Test Date',
    content: `<div id="demo"></div>`,
});

方案2：规范GrapesJS组件写法（推荐） #

按照GrapesJS自定义组件的开发规范，使用scripts属性绑定组件运行逻辑，同时避免固定ID导致的多组件拖拽冲突问题：

// 定义带JS逻辑的自定义组件
editor.Components.addType('comp-with-js', {
    model: {
        defaults: {
            // 组件运行逻辑直接写在scripts属性中，GrapesJS会在组件渲染后自动执行
            scripts: function() {
                const dt = new Date();
                // this.el直接指向当前组件的DOM节点，无需设置固定ID
                this.el.innerHTML = dt;
            }
        }
    }
});

// 添加对应拖拽块
editor.Blocks.add('test-block', {
    label: 'Test Date',
    content: `<div></div>`,
    // 绑定自定义组件类型，拖拽后自动关联对应逻辑
    type: 'comp-with-js'
});

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