Uncaught (in promise) TypeError: Cannot read properties of null (reading 'querySelectorAll')

[MisterRayman]

Describe the issue

I've got a Vue3 Project where I switched to your md-editor. Sometimes when quickly switching between components I get the following error:

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'querySelectorAll') at index.mjs:2276:20

When following the code the error come from the following line:

zoomMermaid(rootRef.value.querySelectorAll(#${editorId} .${prefix}-mermaid));

Even when noMermaid is set to true, the error still appears.

After some investigation it looks like the .value can sometimes still be undefined, causing the error to appear.

index.mjs:2273 rootRef: RefImpl {dep: Dep, __v_isRef: true, __v_isShallow: false, _rawValue: null, _value: null}dep: Dep {computed: undefined, version: 2, activeLink: undefined, subs: undefined, map: undefined, …}__v_isRef: true__v_isShallow: false_rawValue: null_value: nullvalue: (...)[[Prototype]]: Object

index.mjs:2275 rootRef.value: null

When the value is set (the error doesn't appear) everything works perfectly.

This is how I implemented the editor into my component:

<template>
    <MdEditor language="de-DE" v-model="textModel" :toolbars="whitelist" noUploadImg="true" noMermaid="true"/>
</template>

<script setup>
import { MdEditor, config } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import DE_DE from '@vavt/cm-extension/dist/locale/de-DE';

const textModel = defineModel();

const whitelist = [
    "title",
    "-",
    "bold", "italic", "strikeThrough",
    "-",
    "unorderedList", "orderedList", "quote", "link", "image",
    "-",
    "revoke", "next", "prettier",
    "=",
    "pageFullscreen", "fullscreen", "preview", "previewOnly"
];

config({
    editorConfig: {
        languageUserDefined: {
            'de-DE': DE_DE
        },
    }
});
</script>

<script>
export default {
    name: 'MarkdownEditor',
};
</script>

Procedure version

nodejs: 22.11.0, vue: 3.5.12, md-editor-v3: 5.0.1

Reproduction link

No response

[imzbf]

Please provide a demo project to restore the problem. The above code is not enough.

[MisterRayman]

Please try this repo https://github.com/MisterRayman/DemoBug as the demo project.

[imzbf]

Fixed in 5.0.2

[MisterRayman]

Sorry to bother you again. Could you check if your fix works for the demo project? Locally I still get the error even after updating to 5.0.2.

[imzbf]

Sorry to bother you again. Could you check if your fix works for the demo project? Locally I still get the error even after updating to 5.0.2.

I didn't find this issue in the demo project. Are there any other behavior?

2024-11-20.14.57.17.mov

[MisterRayman]

Ah sorry it seems to be a problem with the original project. The demo works fine with the update. I have no idea why i doesn't seem to be working for the original project. Consider this closed. I'll let you know if/when I find a way to reproduce the error in the demo project.
Thank you for the quick responses!

[liujianglc]

After updated 5.0.2 , still have the problem.

Procedure version
nodejs: 22.0.0, vue: 3.5.6, md-editor-v3: 5.0.2

[imzbf]

I need a demo project. Although the null value can be determined directly in the code, the fundamental problem has not been solved.

[karberlee]

I need a demo project. Although the null value can be determined directly in the code, the fundamental problem has not been solved.

The examples in the official documentation can be reproduced directly

[karberlee]

I need a demo project. Although the null value can be determined directly in the code, the fundamental problem has not been solved.

The examples in the official documentation can be reproduced directly

I fixed it by set editorId="md-editor-v-0"

[imzbf]

The value returned by useId in the new version of Vue has changed from v:0 to v-0. Therefore, upgrading Vue is all that is needed.

[imzbf]

at least 3.5.3

[karberlee]

Already tried, Vue 3.5.0 will report an error, but can let it work by set editorId="md-editor-v-0". 3.5.12 runs normally.