vue使用monaco editor时报错 Unexpected usage at EditorSimpleWorker.loadForeignModule

解决方案

// vue.config.js
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')

module.exports = {
  chainWebpack(config) {
    config.plugin('monaco').use(new MonacoWebpackPlugin())
  },
}

在vite中使用

在调用monaco-editor的组件中，如下是vue3.2 tsx中使用json的例子
当前环境： vite：2.8.0， monaco-editor：0.33.0，vue：3.2.25

import * as Monaco from 'monaco-editor'
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'

// @ts-ignore
self.MonacoEnvironment = {
  getWorker: function (_: any, label: string) {
    console.log(label)
    if (label === 'json') {
      return new jsonWorker()
    }
    new editorWorker()
  },
}

参考资料

https://github.com/vitejs/vite/discussions/1791

https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md

https://github.com/vitejs/vite/discussions/1791#discussioncomment-321046

https://github.com/vitejs/vite/discussions/1791