How can I use vue-monaco? - vuejs2

Question

I'm trying to implement vue-monaco, but I get these errors:
ERROR Failed to compile with 2 errors 4:59:58 PM
error in ./node_modules/monaco-editor/esm/vs/basic-languages/_.contribution.js
Module parse failed: Unexpected token (37:13)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| return lazyLanguageLoaders[languageId];
| }
> _languageId;
| _loadingTriggered;
| _lazyLoadPromise;
# ./node_modules/monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution.js 9:0-56 10:0-16
# include-loader!./node_modules/vue-monaco/node_modules/monaco-editor/esm/vs/editor/editor.main.js
# ./node_modules/vue-monaco/dist/vue-monaco.es.js
# ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/PlaygroundView.vue?vue&type=script&lang=js&
# ./src/views/PlaygroundView.vue?vue&type=script&lang=js&
# ./src/views/PlaygroundView.vue
# ./src/router/index.js
# ./src/main.js
# multi (webpack)-dev-server/client?http://X.X.X.X:8081&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
error in ./node_modules/monaco-editor/esm/vs/language/typescript/monaco.contribution.js
Module parse failed: Unexpected token (76:15)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| })(ModuleResolutionKind || {});
| var LanguageServiceDefaultsImpl = class {
> _onDidChange = new monaco_editor_core_exports.Emitter();
| _onDidExtraLibsChange = new monaco_editor_core_exports.Emitter();
| _extraLibs;
# include-loader!./node_modules/vue-monaco/node_modules/monaco-editor/esm/vs/editor/editor.main.js 101:0-92
# ./node_modules/vue-monaco/dist/vue-monaco.es.js
# ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/PlaygroundView.vue?vue&type=script&lang=js&
# ./src/views/PlaygroundView.vue?vue&type=script&lang=js&
# ./src/views/PlaygroundView.vue
# ./src/router/index.js
# ./src/main.js
# multi (webpack)-dev-server/client?http://X.X.X.X:8081&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
I think these issues are related to my vue.config.js; this is it:
const MonacoEditorPlugin = require('monaco-editor-webpack-plugin')
module.exports = {
transpileDependencies: [
'vuetify'
],
configureWebpack: {
plugins: [
new MonacoEditorPlugin({
languages: ['javascript', 'typescript']
})
],
},
}
Component implementation is almost identical to the guide. The guide seems pretty straightforward, so what am I doing wrong?
P.S. I even tried monaco-editor-vue, but I got almost the same errors.

Answer 1

To make it work I had to downgrade monaco-editor-webpack-plugin to 1.9.1; related link here. Note that typescript language is also needed, even though you want only javascript; related link here.