Loader silently fails when used on page in ASP.NET MVC "Areas" page. about monaco-editor HOT 5 CLOSED

@jhurdlow I am sorry for your troubles, the one difference I immediately see is that the URL has a different path (i.e. http://localhost/MySite/Monaco vs http://localhost/MySite/Admin/Monaco), so the question from me would be how do you load the editor?

Do you "manually" create a <script> tag pointing to editor.main.js or do you let the AMD loader create the <script> path via require(['vs/editor/editor.main'], ....

What is the relevant loader config you use (i.e. require.config call you do).

It would be helpful if you could post here the relevant snippet (I'm looking for something like):

<script src="../node_modules/monaco-editor/min/vs/loader.js"></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>

from monaco-editor.

Yeah, the URL is different because that's how areas work, it adds another sub-path. I'm loading editor.main.js with the require(['vs/editor/editor.main']) as per the documentation, just changing the path to the loader and in the require.config(...) call. That gets everything pointed to the right place, and editor.main.js does load, but none of the dependencies load.
After first trying to loading the Monaco files from the same site I figured I would remove any possible path issues by loading the Monaco files from another site. So I spooled up a new IIS app on my box and put just the Monaco files there (http://localhost/Monaco), then modified the script portion to match the supplied example but with my new IIS app as the target. It looks like this:

<script type="text/javascript" src="http://localhost/Monaco/dev/vs/loader.js"></script>
<script>
    require.config({ paths: { 'vs': 'http://localhost/Monaco/dev/vs' } });
    window.MonacoEnvironment = {
        getWorkerUrl: function (workerId, label) {
            return 'scripts/monaco-editor-worker-loader-proxy.js';
        }
    };
    require(['vs/editor/editor.main'], function() {
        var editor = monaco.editor.create(document.getElementById('container'), {
            value: [
                'function x() {',
                '\tconsole.log("Hello Areas World!");',
                '}'
            ].join('\n'),
            language: 'javascript'
        });
    });
</script>

That works as far as loading the editor.main.js, but again, no dependencies. It fails without error, and my browser catches when we try the subsequent monaco.editor.create(...) call, saying monaco is undefined.

from monaco-editor.

I still haven't been able to get it to work with my primary project, but I did try and create a fresh site to use as a minimum example of the bug. I was able to get it to work properly with Areas in that fresh project, so I'm going to close the bug and assume it's a conflict with however my primary project is configured. I'll add more comments if I find anything further.

from monaco-editor.

The issue turns out to be a conflict between KnockoutJS and the Monaco loader. If KnockoutJS is loaded, then the loader fails. Further investigation will be required to determine why this is the case, and if changing load order would work around the problem.

from monaco-editor.

@jhurdlow If there is anything we can do on our side with loader.js please let me know

from monaco-editor.