Monaco-editor does not work

[kurtcodemander]

Does not work:

https://cdn.skypack.dev/monaco-editor https://cdn.skypack.dev/new/monaco-editor@v0.26.0/dist=es2020

The pinned version of 0.25.2 which I have been using does not work any more either

https://cdn.skypack.dev/pin/monaco-editor@v0.25.2-es0d7eyNTrI56BMqNqfQ/mode=imports,min/optimized/monaco-editor.js (loads fine)

...which links to the following which loads fine

https://cdn.skypack.dev/-/monaco-editor@v0.25.2-es0d7eyNTrI56BMqNqfQ/dist=es2020,mode=imports,min/optimized/monaco-editor.js

...which links to the following which is broken with 500 internal server error ("This Serverless Function has crashed"):

https://cdn.skypack.dev/-/monaco-editor@v0.25.2-es0d7eyNTrI56BMqNqfQ/dist=es2020,mode=imports,min/optimized/common/editor.main-72bbe0c2.js

[kurtcodemander]

I still can't get any version of monado-editor to load, pinned or not.

Example, broken with 500: INTERNAL_SERVER_ERROR (when trying to import https://cdn.skypack.dev/monaco-editor

https://cdn.skypack.dev/-/monaco-editor@v0.26.1-vPRRgMd1MO3V53ncmU5m/dist=es2020,mode=imports/optimized/common/editor.main-a8faf29b.js

Pinned version does not work either: https://cdn.skypack.dev/pin/monaco-editor@v0.26.1-vPRRgMd1MO3V53ncmU5m/mode=imports,min/optimized/monaco-editor.js

Because this link is broken: https://cdn.skypack.dev/-/monaco-editor@v0.26.1-vPRRgMd1MO3V53ncmU5m/dist=es2020,mode=imports,min/optimized/common/editor.main-a8faf29b.js

[kurtcodemander]

Any status on this?

[kurtcodemander]

Still no update on this?

[matthewp]

@kurtcodemander none at this time. We'll update the issue when we have a chance to take a look at it.

[jamesgibson14]

@kurtcodemander Hi, this worked for me, however I am having problems loading webworkers: import * as monaco from 'https://cdn.skypack.dev/monaco-editor@0.20.0/esm/vs/editor/editor.main.js';

[kurtcodemander]

Instead of using/relying on skypack.dev (which is often broken) I have created my own tool which uses the release version of Monaco editor as input and outputs a version I'm successfully able to load as ESM module in the browser. Although I'm not minimizing anything yet. I created the tool with some trial and error and this is what I'm currently doing:

1) Start to recursively copy monaco-editor\esm\vs to a new folder 2) For each file, load the text content and run the content through a parser method. However, some files need to be replaced, so for "marked.js" I'm loading the content from "marked.esm.js" instead which exists in the "marked" node module package (here https://github.com/markedjs/marked/blob/master/lib/marked.esm.js).

The parser method does the following:

3) For CSS import statements, replace the import statement with document.head.appendChild which inserts a link tag which links to the css file.

For example, replace

import 'example/folder/example.css'

with

document.head.appendChild(
        Object.assign(
            document.createElement('link'), {{ rel: 'stylesheet', href: '/monaco-editor/example/folder/example.css' }}
        )
);              

4) We need to add ".js" to the import statements in editor.main.js so it becomes:

import '../language/typescript/monaco.contribution.js';
import '../language/css/monaco.contribution.js';
import '../language/json/monaco.contribution.js';
import '../language/html/monaco.contribution.js';
import '../basic-languages/monaco.contribution.js';

export * from './edcore.main.js';

5) In markdownRenderer.js, we need to change the following import statement:

import * as marked from '../common/marked/marked.js';

replace with:

import marked from '../common/marked/marked.js';

Remember that "marked.js" has been replaced with "marked.esm.js". The hover provider in Monaco editor would not work unless I replaced marked.js with marked.esm.js and changed the import statement for marked.

After doing these steps I'm successfully able to load monaco editor in the browser with:

<script type=module>
        import '/monaco-editor-esm-ready/esm/vs/editor/editor.all.js';
        import '/monaco-editor-esm-ready/esm/vs/editor/editor.main.js';
</script>

<script type=module src="test.js">
</script>

test.js:

import * as monaco from '/monaco-editor-esm-ready/esm/vs/editor/editor.api.js';

let editor = monaco.editor.create(....)

Of note is that I'm using Typescript when developing so I'm just using the following in my TS files:

import * as monaco from 'monaco-editor'

But I have created a watch tool which watches the folder that Typescript outputs the compiled .js files to and automatically replaces:

import * as monaco from 'monaco-editor'

with

import * as monaco from '/monaco-editor-esm-ready/esm/vs/editor/editor.api.js';

The next step would be to minify, but I haven't looked into that yet.

All of this feels like a very hacky way of getting things to work, but hey, so far at least it works for me.