Monaco Editor Web Worker Issue with Vue 3 - vue.js

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
]
},
// ...
}