[Bug] monaco-editor v0.31.1 not work with vue cli v4.5.15
See original GitHub issueReproducible 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.
Issue Analytics
- State:
- Created 2 years ago
- Comments:22 (1 by maintainers)
Top Results From Across the Web
Issues · microsoft/monaco-editor · GitHub
[Bug] monaco-editor v0.31.1 not work with vue cli v4.5.15 integration question. #2903 opened on Jan 20 by DarknessChaser. 2 tasks done.
Read more >[Bug] monaco-editor v0.31.1 not work with vue cli v4.5.15
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 ...
Read more >Vue3 Monaco Editor - You may need an appropriate loader to ...
import MonacoEditor from 'vue-monaco' export default { components: { MonacoEditor }, // ... } However, when I try to npm run serve my...
Read more >Web Libraries in Jars - WebJars
angular-bootstrap-fileinput, org.webjars.bower, github-com-geraldhumphries-angular-bootstrap-fileinput, v0.1.0 · angular-bootstrap-lightbox, org.webjars.
Read more >GitLab Community Edition 13.0.1-ce.0 - Sign in · GitLab
alertmanager, v0.20.0, APACHE-2.0, acceptable, Acceptable license ... docker-distribution-pruner, v0.1.0, MIT, acceptable, Acceptable license.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Add babel loader for
*.worker.js
and*.contribution.js
react webpack4