Cannot read properties of undefined (reading 'map')

[xdewx]

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.

[marijnh]

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).

[xdewx]

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%;">
            <div>
                <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>

[marijnh]

I don't know a lot about Vue, but I do know that is does strange things to objects managed as part of its state, and you don't want to put complicated stateful objects like a CodeMirror instance in there. Try refactoring your code to not have the CodeMirror instance in the data object.

[xdewx]

Okay, thank you.

[lperez22]

Thank you so much I was having the same issue Cannot read properties of undefined (reading 'map') occasionally and I removed codemirror instance from data object and instance just assigned it to a const.

[Rainst9]

Thank you so much！！！

[AreViana]

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;
});