Monaco Editor Dependencies Issue

Question

Whenever I launch Monaco Editor (with node.js), it comes up and seems to behave okay, but I get an error message telling me that there are missing dependencies and to check the list. I can't seem to find the dependency list ( I installed via NPM), but I definitely know node.js fs module is included.

Error Message:

Uncaught Error: Check dependency list! Synchronous require cannot resolve module 'fs'. This is the first mention of this module!
at s.synchronousRequire (loader.js:27)
at s (loader.js:34)
at /Library/Application Support/rack/node_modules/monaco-edit…:7
at /Library/Application Support/rack/node_modules/monaco-edit…:7
at ts (/Library/Application Support/rack/node_modules/monaco-edit…:7)
at /Library/Application Support/rack/node_modules/monaco-edit…:7
at t._loadAndEvalScript (loader.js:20)
at loader.js:19
at tryToString (VM1651 fs.js:449)
at FSReqWrap.readFileAfterClose [as oncomplete] (VM1651 fs.js:436)

Usage:

    <script src="node_modules/monaco-editor/min/vs/loader.js"></script>
<script>
require.config({ paths: { 'vs': __dirname + '/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>

Anyone else run into this issue? Thanks!

@estus it's a mixed content CEP extension for Adobe applications, so client side, (Basically a chrome browser with Node.js enabled) — code4days, Jul 09 '18 at 16:47
@Dom Updated with HTML/JS code above. I'm basically just using the sample code, but still getting errors. — code4days, Jul 09 '18 at 16:48
Quickly checked. See https://github.com/Microsoft/monaco-editor/issues/90 . Try to investigate call stack and check where exactly this require('fs') takes place because you're the only person who can do this. Consider providing https://stackoverflow.com/help/mcve that allows others to replicate the problem you have - a repo, etc. — Estus Flask, Jul 09 '18 at 16:53
@estus that link seems similar but the require() fix didn't work in my case. Following the call stack basically seems like the Monaco loader can't find the default node modules "fs", "path", "os", etc even though I've already defined them before accessing Monaco so if I console.log(fs) at anytime it's always defined. Do you know if you have to pass those as arguments or provide a path somewhere? Thanks! — code4days, Jul 09 '18 at 19:23
I would expect this fix to work, https://github.com/Microsoft/monaco-editor/issues/90#issuecomment-243395277 . DId you check the example suggested there, https://github.com/Microsoft/monaco-editor-samples/blob/master/electron-amd ? Were you able to make it work? — Estus Flask, Jul 09 '18 at 20:12

score 1 · Accepted Answer · answered Jul 09 '18 at 20:50

Looks like the getNodeSystem() function in vs/language/typescript/typescriptServices.js tries to require the base Node modules, but if you already have them required then it will return an error.

Kind of a hacky solution, but works for now is to replace their definitions with the already defined versions. If someone has a better fix, let me know. cc @estus

function getNodeSystem() {
            // var _fs = require("fs");
            // var _path = require("path");
            // var _os = require("os");
            var _fs = fs;
            var _path = path;
            var _os = os; 
            [...]
}

Monaco Editor Dependencies Issue

1 Answers1