Add instructions for integrating ESM version with snowpack #2227

jesperp · 2020-11-21T08:28:46Z

Can we have instructions on how to integrate the ESM version of Monaco with Snowpack?
As in here:
https://github.com/microsoft/monaco-editor/blob/master/docs/integrate-esm.md

I'm currently trying different configurations and all seems to work except when workers are created.

If any one has a simple snowpack setup to share I can try it and have a PR to update the docs

Prinzhorn · 2020-11-21T09:26:43Z

except when workers are created

Do you by any chance get an "Unexpected usage" error? From what I understand this might be broken in ESM #2212

jesperp · 2020-11-21T10:26:47Z

Yes! Basically I have this (unnecessary stuff left out for readability)

Main application typescript:

import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
import 'monaco-editor/esm/vs/editor/editor.worker.js'
import 'monaco-editor/esm/vs/language/typescript/ts.worker.js'
import 'monaco-editor/esm/vs/editor/browser/controller/coreCommands.js';
import 'monaco-editor/esm/vs/editor/contrib/find/findController.js';
import 'monaco-editor/esm/vs/language/typescript/monaco.contribution.js';
import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution.js';

self.MonacoEnvironment = {
	getWorkerUrl: function (moduleId, label) {
		if (label === 'typescript' || label === 'javascript') {
			return 'web_modules/monaco-editor/esm/vs/language/typescript/ts.worker.js';
		}
		return 'web_modules/monaco-editor/esm/vs/editor/editor.worker.js';
	}
}

By just doing an import without using, Snowpack makes the module available under http://localhost/web_modules/monaco-editor/.... Monaco does load the file successfully with a 200. But then I get a SyntaxError: import declarations may only appear at top level of a module for the first line of ts.worker.js which is a sign that it is not loaded as a ESM module.

Not sure wether to solve this in my JS-file, Snowpack or Monaco..
Thanks for your suggestion, I will check your issue!

jesperp · 2020-11-21T13:17:49Z

Steps to reproduce:

npx create-snowpack-app monaco-test --template @snowpack/app-template-blank-typescript --use-yarn
cd monaco-test
yarn add monaco-editor

edit: src/index.ts (here I am defining getWorker instead of getWorkerUrl to set worker type)

import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'
import 'monaco-editor/esm/vs/editor/editor.worker.js'
import 'monaco-editor/esm/vs/language/typescript/ts.worker.js'
import 'monaco-editor/esm/vs/language/typescript/monaco.contribution.js';
import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution.js';


(self as any).MonacoEnvironment = {
    getWorker: function(moduleId:string, label:string) {
    console.log("Getting worker", moduleId, label)
    if (['javascript', 'typescript'].includes(label)) {
      return new Worker('web_modules/monaco-editor/esm/vs/language/typescript/ts.worker.js', {
        type: 'module'
      })
    }
    else {
      return new Worker('web_modules/monaco-editor/esm/vs/editor/editor.worker.js', {
        type: 'module'
      })
    }
  }
}


const app = document.getElementById('app')
if (app !== null) {
  monaco.editor.create(app, {
    value: 'function x():void {console.log("Hello world!"); }',
    language: 'typescript'
  })
}

edit: public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Snowpack App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <script type="module" src="/_dist_/index.js"></script>
    <main id="app" style="width:800px; height:600px;"></main>
  </body>
</html>

And then run with yarn start (this can take a while first time).

naknode · 2020-11-22T05:14:13Z

@jesperp I am doing the same exact thing so let us know if you found a solution.

alexdima · 2020-11-22T12:31:39Z

I have just tried the sample from #2227 (comment) and it works for me (I just added one more import to 'monaco-editor/esm/vs/editor/editor.all.js'). There seems to be a problem with the font for icons, but things appear to work:

jesperp · 2020-11-22T14:41:53Z

@alexdima Thanks for your comment! Could you add your full working example? I tried adding just import 'monaco-editor/esm/vs/editor/editor.all.js' to my index.ts file but doesn't seem to work. Same error as before

editor.worker.js:1
SyntaxError: import declarations may only appear at top level of a module

jesperp · 2020-11-22T14:53:45Z

Hmm, so this may be a browser issue. I tried my initial example and alexdima's with the extra import in Chrome 86. It works as expected.

Firefox 83.0 fails:

Safari 14.0.1 fails:

wires · 2020-12-16T11:29:27Z

I am struggling to get this to work well with a snowpack + Svelte application. Been trying the past three days but keep running into worker related issues. I'm not even able to get the AMD version (/package/min) working from a /vendor mount (didn't keep a good debugging log, so can't be specific rn).

The furthest I got was based off this working gist, but I have not been able to extend that config to support Svelte.
https://gist.github.com/mattpowell/221f7d35c4ae1273dc2e1ee469d000a7

HTH

wires · 2020-12-16T12:31:12Z

I gave it another try, starting from create-snowpack-app. It managed to get it to work for snowpack dev but not snowpack build.

The web_modules folder is not populated with the modules from install.

See the readme here for more details https://github.com/wires/debugging-snowpack-svelte-monaco

wires · 2020-12-16T12:46:25Z

Ha, okay, managed to get this to work, the problem was I wasn't referencing the modules.

See the updated readmed here for details https://github.com/wires/debugging-snowpack-svelte-monaco

alexrp · 2021-04-27T15:08:12Z

@wires I don't suppose you've managed to get this working with Snowpack 3.x?

LumaKernel · 2021-07-22T08:30:12Z

Here is my attempt to work with Snowpack 3.x. https://github.com/luma-dev/alt-json

It bundles worker js files into single file before the snowpack compilation with esbuild. It really compiles fast so you wouldn't feel any stresses in development. Even if using esbuild, Snowpack is still necessary to treat css and font assets files imported in monaco-editor.

Main point is that Snowpack v3.x is exposing local node_modules/ to //.../node_modules/... instead of //.../web_modules/.... But even so, Snowpack prepends the import ... statements for controlling and do not bundle, so it does not work with monaco Web Worker system. We cannot use ESModule resolution in the worker context and should prepare worker js files in one file.

remcohaszing · 2021-08-06T10:05:20Z

I think the example in #2605 solves this issue.

alexdima added documentation feature-request Request for new features or functionality labels Nov 22, 2020

karolis-sh mentioned this issue Feb 14, 2021

How to get monaco-editor working? karolis-sh/electron-snowpack#26

Closed

MrGreenTea mentioned this issue Feb 16, 2021

Snowpack and electron support suren-atoyan/monaco-react#187

Closed

hediet added the ESM ECMAScript modules label Aug 6, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add instructions for integrating ESM version with snowpack #2227

Add instructions for integrating ESM version with snowpack #2227

jesperp commented Nov 21, 2020 •

edited

Prinzhorn commented Nov 21, 2020

jesperp commented Nov 21, 2020

jesperp commented Nov 21, 2020 •

edited

naknode commented Nov 22, 2020

alexdima commented Nov 22, 2020

jesperp commented Nov 22, 2020

jesperp commented Nov 22, 2020

wires commented Dec 16, 2020

wires commented Dec 16, 2020

wires commented Dec 16, 2020

alexrp commented Apr 27, 2021

LumaKernel commented Jul 22, 2021

remcohaszing commented Aug 6, 2021

Add instructions for integrating ESM version with snowpack #2227

Add instructions for integrating ESM version with snowpack #2227

Comments

jesperp commented Nov 21, 2020 • edited

Prinzhorn commented Nov 21, 2020

jesperp commented Nov 21, 2020

jesperp commented Nov 21, 2020 • edited

naknode commented Nov 22, 2020

alexdima commented Nov 22, 2020

jesperp commented Nov 22, 2020

jesperp commented Nov 22, 2020

Firefox 83.0 fails:

Safari 14.0.1 fails:

wires commented Dec 16, 2020

wires commented Dec 16, 2020

wires commented Dec 16, 2020

alexrp commented Apr 27, 2021

LumaKernel commented Jul 22, 2021

remcohaszing commented Aug 6, 2021

jesperp commented Nov 21, 2020 •

edited

jesperp commented Nov 21, 2020 •

edited