Import monaco editor using require js

Question

I have installed monaco-editor using

npm install monaco-editor

now I want to require in my js file

so I have tried to require using

var monaco = require('monaco-editor');

but it is giving me module not found error.

Is there wrong I am doing?

There's a discussion on getting it working with front-end module loaders [here](https://github.com/Microsoft/monaco-editor/issues/18#issuecomment-231788869) (the short answer - it's a massive pain). — Joe Clay, Mar 17 '17 at 13:12
Was this resolved when using require.js and bundling? I have not been able to find a solution which does not leave monaco undefined even though the monaco editor module is executed. — mjk, Oct 28 '17 at 18:47

score 4 · Answer 1 · edited Dec 29 '22 at 23:26

Monaco-editor uses a custom AMD style module loader. the loader.js will result in the global require being set to Monaco-editor's loader.

The samples GitHub has many examples of using the editor in different contexts.

Check out how they solve your problem in the Electorn samples index.html. After persisting the Monaco-editor custom loader you would use it like in most of the examples out there. It is an AMD style loader so the syntax differs from node var me = require('monaco') . I am not sure if it is possible to use like node loader but after loading loader.js and persisting the require to some variable such as amdRequire you will use such as:

amdRequire(['vs/editor/editor.main'], function () 
{ 
    // your code using monaco ns here
    monaco.editor.create( document.getElementById('elementId'), {} );
})

score 4 · Answer 2 · answered Mar 25 '18 at 21:00

4

They just released ESM distribution which is compatible with webpack etc. Check out the docs here.

Also there are many examples for using monaco with webpack, parcel an so on. See all.

answered Mar 25 '18 at 21:00

Mesut

242
1
6

score 0 · Answer 3 · answered Feb 07 '23 at 05:52

In my case, I'm trying to load Monaco Editor in nw.js app which had require.js.

Usually Monaco Editor examples recommends using its 'Loader.js'. But if you already have another amd loader (ex: require.js), then you don't need to include & use Monaco's Loader.js. By this Github comment I got to know the Monaco's Loader.js will not do anything if it detects another amd loader.

This official sample might be useful.


<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    </head>
    <body>
        <h2>Monaco Editor Sample - Loading with requirejs</h2>
        <div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div>

        <script
            src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"
            integrity="sha256-0SGl1PJNDyJwcV5T+weg2zpEMrh7xvlwO4oXgvZCeZk="
            crossorigin="anonymous"
        ></script>
        <script>
            require.config({ paths: { vs: '../node_modules/monaco-editor/min/vs' } });

            require(['vs/editor/editor.main'], function () {
                var editor = monaco.editor.create(document.getElementById('container'), {
                    value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
                    language: 'javascript'
                });
            });
        </script>
    </body>
</html>

Import monaco editor using require js

3 Answers3