DarknessChaser commented 2 years ago

Reproducible in vscode.dev or in VS Code Desktop?

[X] Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

[X] 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 commented 2 years ago

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

KKKZOZ commented 2 years ago

I have this problem,too

DarknessChaser commented 2 years ago

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 commented 2 years ago

I have this problem,too

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

KKKZOZ commented 2 years ago

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.

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

DarknessChaser commented 2 years ago

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.

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

🌿

KKKZOZ commented 2 years ago

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!哈哈哈哈

luminaxster commented 2 years ago

Issue #2915 also relates to this.

weeeeibin commented 2 years ago

react webpack4

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

dfgaraev commented 2 years ago

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 commented 2 years ago

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

KKKZOZ commented 2 years ago

同样的问题@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 commented 2 years ago

同样的问题@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 commented 2 years ago

同样的问题@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 commented 2 years ago

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

mojocn commented 2 years ago

老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 commented 2 years ago

monaco-editor-webpack-plugin 要用 7.0.1

minikinl commented 2 years ago

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

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

sharkeyboy commented 1 year ago

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

daidaibg commented 1 year ago

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

daidaibg commented 1 year ago

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 commented 1 year ago

+1

XiayidanAlimu commented 1 year ago

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

microsoft / monaco-editor

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

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

2903 Someone in here has solved this kind of problem, it's es6 syntax problem