vue-monaco-editor icon indicating copy to clipboard operation
vue-monaco-editor copied to clipboard

Error when using in nuxt + electron

Open bcmRayCrazy-coder opened this issue 3 years ago • 1 comments

The error:

TypeError [ERR_INVALID_ARG_TYPE]: The "id" argument must be of type string. Received an instance of Array
    at validateString (internal/validators.js:117)
    at Module.require (internal/modules/cjs/loader.js:1016)
    at require (internal/modules/cjs/helpers.js:77)
    at onGotAmdLoader (MonacoLoader.js?3e05:21)
    at Object.load (MonacoLoader.js?3e05:57)
    at VueComponent.fetchEditor (Monaco.vue?3f8d:114)
    at VueComponent.mounted (Monaco.vue?3f8d:25)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1863)
    at callHook (vue.runtime.esm.js?2b0e:4235)
    at Object.insert (vue.runtime.esm.js?2b0e:3158)
_callee$ @ client.js?1a29:102
tryCatch @ runtime.js?96cf:63
invoke @ runtime.js?96cf:294
eval @ runtime.js?96cf:119
asyncGeneratorStep @ asyncToGenerator.js?1da1:3
_next @ asyncToGenerator.js?1da1:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js?1da1:13
_next @ asyncToGenerator.js?1da1:25
eval @ asyncToGenerator.js?1da1:32
eval @ asyncToGenerator.js?1da1:21
eval @ client.js?1a29:64
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1848
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1871
callHook @ vue.runtime.esm.js?2b0e:4235
insert @ vue.runtime.esm.js?2b0e:3158
invokeInsertHook @ vue.runtime.esm.js?2b0e:6390
patch @ vue.runtime.esm.js?2b0e:6609
Vue._update @ vue.runtime.esm.js?2b0e:3963
updateComponent @ vue.runtime.esm.js?2b0e:4075
get @ vue.runtime.esm.js?2b0e:4495
run @ vue.runtime.esm.js?2b0e:4570
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4326
eval @ vue.runtime.esm.js?2b0e:1989
flushCallbacks @ vue.runtime.esm.js?2b0e:1915
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1942
nextTick @ vue.runtime.esm.js?2b0e:1999
queueWatcher @ vue.runtime.esm.js?2b0e:4418
update @ vue.runtime.esm.js?2b0e:4560
Vue.$forceUpdate @ vue.runtime.esm.js?2b0e:3984
eval @ index.js?6435:244
eval @ index.js?6435:242
eval @ index.js?6435:119
eval @ script.vue?8220:29
./renderer/components/editor/script.vue @ app.js:731
__webpack_require__ @ runtime.js:854
hotApplyInternal @ runtime.js:750
hotApply @ runtime.js:412
cb @ process-update.js?e135:76
eval @ process-update.js?e135:91
Promise.then (async)
check @ process-update.js?e135:90
module.exports @ process-update.js?e135:52
processMessage @ client.js?1b93:279
handleMessage @ client.js?1b93:139
handleMessage @ client.js?1b93:102

bcmRayCrazy-coder avatar May 17 '22 12:05 bcmRayCrazy-coder

Here is the page

<template>
    <div class="editor-container">
        <MonacoEditor
            height="600"
            language="typescript"
            :code="code"
            :editorOptions="options"
            @mounted="onMounted"
            @codeChange="onCodeChange"
            >
        </MonacoEditor>
    </div>
</template>
<script>
import MonacoEditor from "vue-monaco-editor/src/Monaco.vue";
export default {
    name:'EditorScript',
    data(){
        return{
            code:"Loading code...",
            key: "henhenhen114514aaa",
            options:{
                language:"javascript",
            },
            /**
             * @type {MonacoEditor}
             */
            editor:null,
        }
    },
    mounted(){
        // this.init();
    },
    methods:{
        onMounted(editor){
            this.editor = editor;
        },
        onCodeChange(){
            this.code = this.editor.getValue();
            console.log(this.code);
        },
    },
    components:{
        MonacoEditor,
    }
}
</script>
<style scoped>
#editor-container{
    height:100%;
    width:100%;
}
</style>

bcmRayCrazy-coder avatar May 17 '22 12:05 bcmRayCrazy-coder