Cannot read properties of undefined (reading 'map') · Issue #6886 · codemirror/codemirror5

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

As follow, i am working on changing mode when editing.

There seems this.instance.setOption("mode",mode) has no error, but then, the editor can't be focused on and Cannot read properties of undefined (reading 'map') appears.

What should i do? please help me.

Have you tried reducing this problem to the minimal script needed to trigger it? That might help reproduce the issue (dynamically changing the mode generally works).

As follow, it is just a single *.vue file( vue3 ). After changing mode and input again, the issue will reproduce.

<template>
    <div v-bind=" $attrs ">
        <div class="vflex scroll-y" style="height:100%;">
                <select v-model=" mode " class="float-r" @change=" setOption( 'mode', mode ) ">
                    <option v-for="(v, k) in    modes    " :key=" v " :value=" k ">{{ k }}</option>
                </select>
            </div>
            <div class="flex-1">
                <textarea ref="ta" />
            </div>
        </div>
    </div>
</template>
<script>
import codemirror from "codemirror"
import mimes from 'dew/src/const/mimes/codes'
export default {
    name: 'CodeMirrorEditor',
    // model: {
    //     prop: "value",
    //     event: "input"
    // },
    props: {
        options: { type: Object, default: {} },
        modelValue: { type: String, default: "" },
    data: function () {
        return {
            instance: undefined,
            modes: mimes,
            mode: this.options.mode || "text/x-markdown"
    mounted () {
        // window.mimes = mimes
        // console.log( codemirror.modes, codemirror.miniModes )
        let ops = Object.assign( {}, {
            lineWrapping: true,
            styleActiveLine: true,
            lineNumbers: true,
            smartIndent: true,
            indentWithTabs: false,
            theme: 'idea', //编辑器主题
            lint: true,
            matchBrackets: true,
            foldGutter: true,
            gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
            highlightFormatting: true,
            emoji: false,
            mode: "text/x-markdown",
        }, this.options );
        console.log( ops )
        let x = codemirror.fromTextArea( this.$refs.ta, ops );
        // x.setSize( '100%', '100%' );
        x.on( "change", ( inst, obj ) => {
            // console.log( inst.getValue() )
            // 这里竟然可以被@input捕获
            this.$emit( "update:modelValue", inst.getValue() );
        x.on( "inputRead", ( inst, e ) => {
            // console.log( inst.getValue() )
            this.$emit( "update:modelValue", inst.getValue() );
            // 不知道为什么上面的没有被@input捕获，于是这里重新emit
            this.$emit( "input", inst.getValue() )
        this.instance = x;
    methods: {
        getInstance () {
            return this.instance;
        setOption ( k, v ) {
            console.log( k, v )
            this.instance.setOption( k, v );
        refresh () {
            return this.instance.refresh();
        getValue () {
            return this.instance.getValue();
        setValue ( v ) {
            return this.instance.setValue( v );
        disable ( flag = true ) {
            this.instance.setOption( "readOnly", flag )
</script>

Thank you so much @marijnh , I recently had the same problem using Vue3's composition API.
I'll put my code here and how I fixed it in case someone (or even me again) addresses the same issue in the future...

BEFORE:

const codeEditor: Ref<any> = ref({});
onMounted(() => {
  codeEditor.value = CodeMirror.fromTextArea(textAreaRef, opts);
  codeEditor.value.setSize('100%', props.fullHeight ? '100%' : 500); // This line was triggering the error.
AFTER:
const codeEditor: Ref<any> = ref({});
onMounted(() => {
  // I created a local variable inside this 'onMounted' scope just to configure my CodeMirror instance.
  const codeMirror = CodeMirror.fromTextArea(textAreaRef, opts);
  codeMirror.setSize('100%', props.fullHeight ? '100%' : 500);
  // After finishing the setup I assign the instance to my ref variable (because I need it outside this scope)
  codeEditor.value = codeMirror;