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?

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)

Most upvoted comments

{
    test: /monaco-editor\/.*\.js/,
    loader: "babel-loader"
}

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

react webpack4

# package.json
dependencies{
        ...
        "react-monaco-editor": "0.46.0", 
        "monaco-editor": "0.30.1"
        "monaco-editor-webpack-plugin": "6.0.0", 
        ...
}

#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

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /monaco-editor[\\/].*\.js$/,
        loader: "babel-loader",
      },
    ],
  },
}

I use vuecli@4.5.19 In vue.config.js I configured like this

module.exports = {
 chainWebpack: (config) => {
    config.module
      .rule('monaco-editor-babel-loader')
      .test(/monaco-editor[\\/].*\.js$/)
      .end()
      .use("babel-loader")
      .loader("babel-loader")
      .end()
   }
}

降低版本也可以 “monaco-editor”: “^0.30.1”

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

老vue 项目编译通过了, 降低 moncao 版本就可以编译了

  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-plugin-component": "^1.1.1",
    "monaco-editor": "0.30.1",
    "monaco-editor-webpack-plugin": "6.0.0",
    "vue-template-compiler": "^2.6.11"
  },

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"