Monaco Editor Web Worker Issue with Vue 3

Question

I was trying to implement Monaco Editor in Vue 3 application but I could not get the web worker running.

// Editor.vue

<template>
  <div id="container">
    <div id="editor-section"></div>
    <button @click="runCode">Run</button>
  </div>
</template>

<script>
import * as monaco from "monaco-editor";
import { onMounted } from "vue";

export default {
  name: "Editor",
  setup() {
    let codeEditor = null;

    function initEditor() {
      codeEditor = monaco.editor.create(document.getElementById("editor-section"), {
        value: "function hello() {\n\talert('Hello world!');\n}",
        language: "javascript",
        theme: "vs-dark"
      });
    }

    function runCode() {
      console.log("runCode");
      console.log(codeEditor.getValue());
    }

    onMounted(() => {
      initEditor();
    })

    return { codeEditor, runCode }
  },
};
</script>

I am getting the Editor but there is this issue

I am using

// vue.config.js

const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");

module.exports = {
  plugins: [
    new MonacoWebpackPlugin()
  ]
};

Am I missing anything?

Should I care about the Issue anyway?

My goal of the project is I want to implement a web editor that takes the written file and compiles in docker container.

Answer 1

It looks like you put the plugin in the wrong place. It's supposed to be placed in configureWebpack which represents for webpack configuration instead:

vue.config.js

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new MonacoWebpackPlugin(), // Place it here
    ]
  },
  // ...
}