monaco-editor: [Bug] monaco-editor v0.31.1 not work with vue cli v4.5.15
Reproducible in vscode.dev or in VS Code Desktop?
- Not reproducible in vscode.dev or VS Code Desktop
Reproducible in the monaco editor playground?
- Not reproducible in the monaco editor playground
Monaco Editor Playground Code
No response
Actual Behavior
<template>
<div id="editor"></div>
</template>
<script>
import * as monaco from 'monaco-editor';
import { defineComponent } from 'vue';
export default defineComponent({
name: 'MonacoEditor',
mounted() {
monaco.editor.create(document.getElementById('editor'), {
value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
language: 'javascript',
});
},
});
</script>
<style scoped>
</style>
Expected Behavior
Load editor in div
Additional Context
$ vue-cli-service build
ERROR Failed to compile with 2 errors 下午5:46:26
error in ./node_modules/monaco-editor/esm/vs/language/html/monaco.contribution.js
Module parse failed: Unexpected token (130:11)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process thi
s file. See https://webpack.js.org/concepts#loaders
| dispose() {
| onLanguageListener.dispose();
> mode?.dispose();
| mode = void 0;
| }
@ ./node_modules/monaco-editor/esm/vs/editor/editor.main.js 4:0-46
@ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/b
abel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!
./src/views/MonacoEditor.vue?vue&type=script&lang=js
@ ./src/views/MonacoEditor.vue?vue&type=script&lang=js
@ ./src/views/MonacoEditor.vue
@ ./src/router/index.ts
@ ./src/main.ts
@ multi ./src/main.ts
error in ./node_modules/monaco-editor/esm/vs/language/typescript/tsMode.js
Module parse failed: Unexpected token (686:30)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process thi
s file. See https://webpack.js.org/concepts#loaders
| }
| const tags = [];
> if (entry.kindModifiers?.indexOf("deprecated") !== -1) {
| tags.push(monaco_editor_core_exports.languages.CompletionItemTag.Deprecated);
| }
@ ./node_modules/monaco-editor/esm/vs/language/typescript/monaco.contribution.js 232:11-29
@ ./node_modules/monaco-editor/esm/vs/editor/editor.main.js
@ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/b
abel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!
./src/views/MonacoEditor.vue?vue&type=script&lang=js
@ ./src/views/MonacoEditor.vue?vue&type=script&lang=js
@ ./src/views/MonacoEditor.vue
@ ./src/router/index.ts
@ ./src/main.ts
@ multi ./src/main.ts
ERROR Build failed with errors.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Comments: 23 (1 by maintainers)
Add babel loader for
*.worker.jsand*.contribution.jsreact webpack4
#2903 Someone in here has solved this kind of problem, it’s es6 syntax problem maybe you can try the solution here if you are using webpack 4
I use vuecli@4.5.19 In vue.config.js I configured like this
The issue seems to be related to webpack version.
In vue-cli v4.5.x,they use webpack 4. monaco-editor v0.31.1 not work.
In vue-cli v5.0.x,they use webpack 5. monaco-editor v0.31.1 work good.
Maybe monaco can provide a recommended webpack version? or prompt 0.31.1 version no longer supports vue-cli4
this works for me, I downgraded versions of monaco-editor and monaco-editor-webpack-plugin in vue project, this works for me.
"monaco-editor": "0.30.1" "monaco-editor-webpack-plugin": "6.0.0"