CODEWITHSUNDEEP
webpackes6-modulesmonaco-editorwebpack-5
Max Yankov
Max Yankov

Reputation: 13277

How can I use monaco yaml plugin with Monaco Webpack Loader Plugin?

I have ESM version of Monaco set up using the Webpack Loader plugin. I want to add monaco yaml plugin, and I struggle to understand how do I do that. I'm using the Integrating the ESM version of the Monaco Editor guide and Monaco Yam plugin README.

The documentation on yaml plugin says to set up getWorker function in MonacoEnvironment; however, the ESM documentation says to either use Webpack loader, or to set up getWorkerUrl` function, so three different ways to set this up in total.

Overall, there's no proper information about exact contracts of all this configuration, just simple examples, and a lot of things that seem to be vaguely similar between all the three methods (getWorker, getWorkerUrl and MonacoWebpackPlugin) without any clarifications, so I just feel very confused by it. These questions are my best attempt at structuring all the information available to me.

Upvotes: 0

Views: 1446

Answers (1)

Max Yankov
Max Yankov

Reputation: 13277

I've added the answer to the plugin's README file:

You can extend the plugin's configuration. Extend your webpack.config.js file with the following:

import { MonacoWebpackPlugin } from 'monaco-editor-webpack-plugin';

export default {
  // ...the rest of your webpack configuration...
  plugins: [
    new MonacoWebpackPlugin({
      languages: ['yaml'],
      customLanguages: [
        {
          label: 'yaml',
          entry: 'monaco-yaml',
          worker: {
            id: 'monaco-yaml/yamlWorker',
            entry: 'monaco-yaml/yaml.worker',
          },
        },
      ],
    }),
  ],
};

You can also refer to the example of a complete project.

Upvotes: 1

Related Questions