crepe.editor.use console error: MilkdownError: Timer "InitReady" not found, do you forget to record it?

[yishiyuntuan]

When adding a custom plugin, it does not take effect and an error occurs in the console，When adding a custom plugin, it does not take effect and an error occurs in the console,I searched and found https://github.com/orgs/Milkdown/discussions/1657is OK

MilkdownError: Timer "InitReady" not found, do you forget to record it?
    at timerNotFound (index.ts:24:10)
    at Clock.get (clock.ts:16:22)
    at _Ctx.timer (ctx.ts:112:54)
    at _Ctx.wait (ctx.ts:122:26)
    at $remark.ts:34:15
    at editor.ts:150:29
    at Array.map (<anonymous>)
    at #loadPluginInStore (editor.ts:146:33)
    at _Editor.create (editor.ts:244:14)
    at CrepeBuilder.create (builder.ts:96:25)

<template>
  <MilkdownProvider>
    <EditorComponent />
  </MilkdownProvider>
</template>
<script setup>

import { Milkdown, useEditor, MilkdownProvider } from '@milkdown/vue';
import { defaultValueCtx, Editor, rootCtx } from '@milkdown/kit/core';
import "@milkdown/theme-nord/style.css";
import { nord } from '@milkdown/theme-nord'
import { commonmark } from '@milkdown/kit/preset/commonmark'
import { defineComponent, h, onMounted } from 'vue';

import { remarkMarkColor } from './extends/mark/remark-mark-color';
import './extends/mark/style.css';
import { $remark } from '@milkdown/kit/utils';
import { v4 as uuidv4 } from "uuid";
const props = defineProps({
  markdownContent: String, // 用于v-model绑定
  editTheme: String, // 明暗模式控制
});
import { defaultConfig } from "@milkdown/components/code-block";

import { Crepe } from "@milkdown/crepe";
import { oneDark, oneLight } from "./theme-extension";

import { languages } from "@codemirror/language-data";
import { mermaidLanguageDescription } from "codemirror-lang-mermaid";
import mermaid from "mermaid";
import {highlightMarkPlugin} from './extends/mark/mark-plugin';
const renderSvg = (divId, mermaidContent) => {
  const svgId = "mermaid-svg-" + divId;
  mermaid.render(svgId, mermaidContent).then((output) => {
    const svgPanel = document.getElementById(divId);
    if (!svgPanel) {
      console.error("Mermaid渲染失败，没有找到渲染节点: .milkdown-mermaid-svg");
      return;
    }
    svgPanel.classList.add('flex', 'justify-center');
    svgPanel.innerHTML = output.svg;
  });
};

// 新增 Mermaid 渲染函数
const renderMermaidToDom = (content) => {
  const graphId = "mermaid-" + uuidv4();
  let dom = document.createElement("div");

  dom.id = graphId;
  // dom.classList.add('flex justify-center');
  (function (divId) {
    // 先验证语法,提前抛出错误, 为了增量渲染正确的部分
    // 配置了 suppressErrors = false, 当语法无效时抛出错误异常
    mermaid
      .parse(content, { suppressErrors: false })
      .then(() => {
        renderSvg(divId, content);
      })
      .catch((err) => {
        const previewDiv = document.getElementById(divId);
        if (previewDiv) {
          const svgDiv = previewDiv.querySelector("div.milkdown-mermaid-svg");
          if (!svgDiv) {
            previewDiv.innerHTML = `<span style="color:#DC362E">语法错误: ${err.message}</span>`;
          }
        } else {
          console.error(">>>>> 渲染错误:", err);
        }
      });
  })(graphId);

  return dom;
};


// 定义组件
const EditorComponent = defineComponent({
  name: 'Milkdown',
  setup: () => {
    const { get } = useEditor((root) => {
      const crepe = new Crepe({
        root,
        defaultValue: props.markdownContent,
        featureConfigs: {
          [Crepe.Feature.CodeMirror]: {
            theme: props.editTheme == 'dark' ? oneDark : oneLight,
            languages: [...languages, mermaidLanguageDescription],
            previewToggleText: (previewActive) => (previewActive ? "编辑" : "预览"),
            copyText: "复制",
            renderPreview: (language, code) => {
              if (language.toLowerCase() == "mermaid" && code.length > 0) {
                return renderMermaidToDom(code);
              }
              return defaultConfig.renderPreview(language, code);
            },
          },
        },
      });
      crepe.editor.use(highlightMarkPlugin)
      return crepe;
    })
    onMounted(() => {
      console.log(get());
    })
    return () => h(Milkdown)
  },
})

</script>

[Saul-Mirone]

you have multiple versions of milkdown in your app.

[yishiyuntuan]

I checked the package.json files and found that some components were missing ^, resulting in inconsistent versions