webpackoptimizationvue-cli-3monaco-editor

How to fix error: Unexpected usage loading foreign module for monaco editor in vue-cli-3


When i try to include optimization options in my vue-cli-3 project, which use monaco-editor in some pages, I get the following error in console:

languageFeatures.js?ff36:85 Error: Unexpected usage
    at EditorSimpleWorker.loadForeignModule (editorSimpleWorker.js?ccf6:540)
    at eval (webWorker.js?af50:54)

Here is my vue.config.js file:

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const PurgecssPlugin = require("purgecss-webpack-plugin");


module.exports = {
    transpileDependencies: ["vuex-persist", "vuex-persistedstate"],
    configureWebpack: {
        devtool: false,
        optimization: {
            splitChunks: {
                minSize: 10000, 
                maxSize: 250000, 
            },
            nodeEnv: "production",
            minimize: true,
            minimizer: [
                new TerserPlugin({
                    extractComments: 'false',
                    parallel: true,
                }),
            ],
            removeEmptyChunks: true,
            removeAvailableModules: true,
            mergeDuplicateChunks: true
        },
        plugins: [
            new MonacoWebpackPlugin({
                languages: ['javascript', 'css', 'html', 'typescript', 'json'],
                features: ['!gotoSymbol'],
            }),
            new PurgecssPlugin({paths: glob.sync(`${PATHS.src}/**/*`, {nodir: true})}),
        ],
    }
};

So the question is, how do I avoid to obtaining this error?


Solution

  • The base URL of the Monaco environment should be defined and the main worker should be imported before trying to import editor.main.js. You can try to resolve your issue by executing the following code before trying to load the editor.

    (window as any).MonacoEnvironment = {
          getWorkerUrl: function (workerId, label) {
              return `data:text/javascript;charset=utf-8,${encodeURIComponent(`
                  self.MonacoEnvironment = { baseUrl: '${window.location.origin}/' };
                  importScripts('${window.location.origin}/vs/base/worker/workerMain.js');
              `)}`;
          }
    };
    

    It is also important to note that you should change the URL to where your vs files are hosted.