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

DarknessChaser · 2022-01-20T09:48:11Z

DarknessChaser
Jan 20, 2022

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 · 2022-01-20T09:49:35Z

DarknessChaser
Jan 20, 2022
Author

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

0 replies

KKKZOZ · 2022-01-21T02:52:24Z

KKKZOZ
Jan 21, 2022

I have this problem,too

0 replies

DarknessChaser · 2022-01-21T03:28:51Z

DarknessChaser
Jan 21, 2022
Author

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

0 replies

DarknessChaser · 2022-01-21T03:33:39Z

DarknessChaser
Jan 21, 2022
Author

I have this problem,too

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

0 replies

KKKZOZ · 2022-01-21T04:00:32Z

KKKZOZ
Jan 21, 2022

I have this problem,too

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

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

0 replies

DarknessChaser · 2022-01-21T04:01:20Z

DarknessChaser
Jan 21, 2022
Author

I have this problem,too

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

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

🌿

0 replies

KKKZOZ · 2022-01-21T04:02:56Z

KKKZOZ
Jan 21, 2022

I have this problem,too

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

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

🌿

Surprise!哈哈哈哈

0 replies

luminaxster · 2022-01-24T23:08:02Z

luminaxster
Jan 24, 2022

Issue #2915 also relates to this.

0 replies

weeeeibin · 2022-01-29T06:41:12Z

weeeeibin
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", 
        ...
}

0 replies

dfgaraev · 2022-02-11T06:13:46Z

dfgaraev
Feb 11, 2022

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

0 replies

lzml · 2022-02-23T15:29:27Z

lzml
Feb 23, 2022

同样的问题@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,也不行，你解决了么？

0 replies

KKKZOZ · 2022-02-23T16:02:48Z

KKKZOZ
Feb 23, 2022

同样的问题@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

0 replies

lzml · 2022-02-24T08:30:09Z

lzml
Feb 24, 2022

同样的问题@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，是正常的，估计还有其他的包在影响，已经准备用新的工程文件+复制老代码处理了

0 replies

DarknessChaser · 2022-02-24T08:32:09Z

DarknessChaser
Feb 24, 2022
Author

同样的问题@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 你试试手动打开？

0 replies

kangsen0426 · 2022-03-25T10:17:40Z

kangsen0426
Mar 25, 2022

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

0 replies

mojocn · 2022-03-29T01:42:10Z

mojocn
Mar 29, 2022

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

0 replies

nwind · 2022-04-14T02:52:49Z

nwind
Apr 14, 2022

monaco-editor-webpack-plugin 要用 7.0.1

0 replies

minikinl · 2022-04-22T15:09:42Z

minikinl
Apr 22, 2022

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

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

0 replies

sharkeyboy · 2022-08-22T19:32:21Z

sharkeyboy
Aug 22, 2022

{
    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"
        }
      ]
    } 
  }
};```

0 replies

daidaibg · 2022-09-05T06:28:23Z

daidaibg
Sep 5, 2022

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

0 replies

daidaibg · 2022-09-05T07:27:11Z

daidaibg
Sep 5, 2022

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

0 replies

dwanl · 2022-09-21T08:57:33Z

dwanl
Sep 21, 2022

+1

0 replies

XiayidanAlimu · 2023-02-27T07:04:46Z

XiayidanAlimu
Feb 27, 2023

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

0 replies

xuyaqist · 2023-08-31T02:33:35Z

xuyaqist
Aug 31, 2023

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.

0 replies

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

Reproducible in vscode.dev or in VS Code Desktop?

Reproducible in the monaco editor playground?

Monaco Editor Playground Code

Actual Behavior

Expected Behavior

Additional Context

Replies: 24 comments

DarknessChaser Jan 20, 2022 Author

DarknessChaser Jan 21, 2022 Author

DarknessChaser Jan 21, 2022 Author

DarknessChaser Jan 21, 2022 Author

DarknessChaser Feb 24, 2022 Author

DarknessChaser
Jan 20, 2022
Author

DarknessChaser
Jan 21, 2022
Author

DarknessChaser
Jan 21, 2022
Author

DarknessChaser
Jan 21, 2022
Author

DarknessChaser
Feb 24, 2022
Author