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

[DarknessChaser]

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.

[DarknessChaser]

when i use monaco-editor v0.30.1, works fine

[Liu Jinyi (KKKZOZ)]

I have this problem,too

[DarknessChaser]

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

[DarknessChaser]

I have this problem,too

Liu Jinyi (@KKKZOZ) nihao！You might be able to try vue-cli 5.0.0. this works for me.

[Liu Jinyi (KKKZOZ)]

I have this problem,too

Liu Jinyi (@KKKZOZ) nihao (mean to hello in Chinese)！You might be able to try vue-cli 5.0.0. this works for me.

哈哈哈哈你好你好
我纠结这个问题好几天了，超级感谢!

[DarknessChaser]

I have this problem,too

Liu Jinyi (@KKKZOZ) nihao (mean to hello in Chinese)！You might be able to try vue-cli 5.0.0. this works for me.

哈哈哈哈你好你好 我纠结这个问题好几天了，超级感谢!

🌿

[Liu Jinyi (KKKZOZ)]

I have this problem,too

Liu Jinyi (@KKKZOZ) nihao (mean to hello in Chinese)！You might be able to try vue-cli 5.0.0. this works for me.

哈哈哈哈你好你好 我纠结这个问题好几天了，超级感谢!

🌿

Surprise!哈哈哈哈

[David I Samudio (luminaxster)]

Issue #2915 also relates to this.

[weibiXD (weeeeibin)]

react webpack4

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

[Denis (dfgaraev)]

The same problem
@vue/cli 4.5.15
webpack 5.65.0

"dependencies": {
    "monaco-editor": "^0.32.1",
    "monaco-editor-webpack-plugin": "^7.0.1",
    ...
}

[lzml]

同样的问题@vue/cli 4.5.15 webpack 5.65.0

"dependencies": {
    "monaco-editor": "^0.32.1",
    "monaco-editor-webpack-plugin": "^7.0.1",
    ...
}

我也碰到同样问题了，vue-cli升级到5.0,也不行，你解决了么？

[Liu Jinyi (KKKZOZ)]

同样的问题@vue/cli 4.5.15 webpack 5.65.0

"dependencies": {
    "monaco-editor": "^0.32.1",
    "monaco-editor-webpack-plugin": "^7.0.1",
    ...
}

我也碰到同样问题了，vue-cli升级到5.0,也不行，你解决了么？

这是我的相应配置，可以正常使用
This is my part of package.json file, it works fine for me!

"dependencies": {
    "@types/sortablejs": "^1.10.7",
    "core-js": "^3.8.3",
    "element-plus": "^1.3.0-beta.7",
    "monaco-editor": "^0.31.1",
    "monaco-editor-webpack-plugin": "^7.0.1",
    "sortablejs": "^1.14.0",
    "vue": "^3.2.13",
    "xterm": "^4.16.0"
  },

相关版本
node version: v16.13.2
npm version: 8.1.2
@vue/cli 5.0.0-rc.2

[lzml]

同样的问题@vue/cli 4.5.15 webpack 5.65.0

"dependencies": {
    "monaco-editor": "^0.32.1",
    "monaco-editor-webpack-plugin": "^7.0.1",
    ...
}

我也碰到同样问题了，vue-cli升级到5.0,也不行，你解决了么？

这是我的相应配置，可以正常使用 This is my part of package.json file, it works fine for me!

"dependencies": {
    "@types/sortablejs": "^1.10.7",
    "core-js": "^3.8.3",
    "element-plus": "^1.3.0-beta.7",
    "monaco-editor": "^0.31.1",
    "monaco-editor-webpack-plugin": "^7.0.1",
    "sortablejs": "^1.14.0",
    "vue": "^3.2.13",
    "xterm": "^4.16.0"
  },

相关版本 node version: v16.13.2 npm version: 8.1.2 @vue/cli 5.0.0-rc.2

谢谢，老工程vue/cli是4.5的，升级到5.0以后，包括你上面列举的这些包，都升级了还是不行，但是我测试了下直接用5.0版本的vue/cli创建的新工程接入monaco，是正常的，估计还有其他的包在影响，已经准备用新的工程文件+复制老代码处理了

[DarknessChaser]

同样的问题@vue/cli 4.5.15 webpack 5.65.0

"dependencies": {
    "monaco-editor": "^0.32.1",
    "monaco-editor-webpack-plugin": "^7.0.1",
    ...
}

我也碰到同样问题了，vue-cli升级到5.0,也不行，你解决了么？

这是我的相应配置，可以正常使用 This is my part of package.json file, it works fine for me!

"dependencies": {
    "@types/sortablejs": "^1.10.7",
    "core-js": "^3.8.3",
    "element-plus": "^1.3.0-beta.7",
    "monaco-editor": "^0.31.1",
    "monaco-editor-webpack-plugin": "^7.0.1",
    "sortablejs": "^1.14.0",
    "vue": "^3.2.13",
    "xterm": "^4.16.0"
  },

相关版本 node version: v16.13.2 npm version: 8.1.2 @vue/cli 5.0.0-rc.2

谢谢，老工程vue/cli是4.5的，升级到5.0以后，包括你上面列举的这些包，都升级了还是不行，但是我测试了下直接用5.0版本的vue/cli创建的新工程接入monaco，是正常的，估计还有其他的包在影响，已经准备用新的工程文件+复制老代码处理了

我大概猜测是因为新版vue.config.js中的transpileDependencies: true 你试试手动打开？

[千北 (kangsen0426)]

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

[EricZhou周庆 (mojocn)]

老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"
  },

[吴多益 (nwind)]

monaco-editor-webpack-plugin 要用 7.0.1

[minimini (minikinl)]

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

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

[Mark Sharkey (sharkeyboy)]

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

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

For those like me who aren't sure where to put this, I put it in the vue.config.js

const path = require("path");
module.exports = {
  configureWebpack: {
    plugins: [
      new MonacoWebpackPlugin({
        languages: ["python"],//configure your languages here
      }), // Place it here
    ],
    module:{
      rules: [
        {
          test: /monaco-editor\/.*\.js/,
          loader: "babel-loader"
        }
      ]
    } 
  }
};```

[Daidai Bug (daidaibg)]

vuecli5.0.8 is no problem, however. 0.34.0 will have other problems, there is no problem below 0.33.0

    "@vue/cli-plugin-babel": "^5.0.8",
    "@vue/cli-plugin-router": "^5.0.8",
    "@vue/cli-plugin-vuex": "^5.0.8",
    "@vue/cli-service": "^5.0.8",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
    "vue-template-compiler": "^2.6.14",
    "monaco-editor": "^0.33.0",
    "monaco-editor-esm-webpack-plugin": "^2.1.0",
    "monaco-editor-nls": "^3.0.0",
    "monaco-editor-webpack-plugin": "^7.0.1",
  },

[Daidai Bug (daidaibg)]

#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()
   }
}

[DwanL (dwanl)]

+1

[Xayida (XiayidanAlimu)]

老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"

[xuyaqi (xuyaqist)]

My monaco-editor version is:

"monaco-editor-webpack-plugin": "7.0.1",
"monaco-editor": "0.34.1"

and I tried to put this in my vue.config.js

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

It didn't work.
My vue/cli-plugin-babel and vue/cli-service used to be 3.x，and core-js used to be 2.x. And when I try to update those dependencies to the following versions,

"@vue/cli-plugin-babel": "4.4.0",
"@vue/cli-service": "4.1.0",
"core-js": "3.29.1"

It works! Thank God.