question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug] monaco-editor v0.31.1 not work with vue cli v4.5.15

See original GitHub issue

Reproducible in vscode.dev or in VS Code Desktop?

  • Not reproducible in vscode.dev or VS Code Desktop

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:open
  • Created 2 years ago
  • Comments:22 (1 by maintainers)

github_iconTop GitHub Comments

6reactions
minikinlcommented, Apr 22, 2022
{
    test: /monaco-editor\/.*\.js/,
    loader: "babel-loader"
}

Add babel loader for *.worker.js and *.contribution.js

4reactions
weeeeibincommented, Jan 29, 2022

react webpack4

# package.json
dependencies{
        ...
        "react-monaco-editor": "0.46.0", 
        "monaco-editor": "0.30.1"
        "monaco-editor-webpack-plugin": "6.0.0", 
        ...
}
Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found