node > 20 (本项目使用 20.19.4)

vite 7.1.11

react 19.0.0

monaco-editor v0.55.1

vite-plugin-monaco-editor-esm v2.0.2

yarn add monaco-editor

yarn add vite-plugin-monaco-editor-esm --save-dev

在Vite项目中使用vite-plugin-monaco-editor插件时，常遇到“monacoeditorplugin is not a function”错误。该问题通常由插件导入路径错误、版本不兼容或环境配置缺失导致。

import { defineConfig } from 'vite';
import monacoEditorPlugin from 'vite-plugin-monaco-editor'; // 确保导入路径正确

export default defineConfig({
  plugins: [
    monacoEditorPlugin({
      languageWorkers: ['editorWorkerService', 'typescript', 'json', 'html'], // 配置语言服务
    }),
  ],
});

// 配置Worker路径（Vite需特殊处理）
self.MonacoEnvironment = {
  getWorkerUrl: (moduleId, label) => {
    if (label === 'json') return new URL('monaco-editor/esm/vs/language/json/json.worker.js', import.meta.url).href;
    if (label === 'typescript' || label === 'javascript') return new URL('monaco-editor/esm/vs/language/typescript/ts.worker.js', import.meta.url).href;
    return new URL('monaco-editor/esm/vs/editor/editor.worker.js', import.meta.url).href;
  },
};

原因：Vite的模块解析机制与Webpack不同，需显式指定Worker路径。

插件 monaco-editor-webpack-plugin 针对 webpack。

插件 vite-plugin-monaco-editor 针对vite 但是vite 在package.json中设置了type: module，因此会出现 “monacoeditorplugin is not a function” 错误。