Monaco-editor: Issue when using with parcel

Created on 15 Dec 2018 · 5Comments · Source: microsoft/monaco-editor

monaco-editor version: 0.15.6
Browser: Chrome
OS: Mac

I'm getting an error when trying to use approach from the parcel sample. When I include the Worker with self.MonacoEnvironment using getWorker and ../node_modules/monaco-editor/esm/vs/language/typescript/ts.worker.js I get the following error:

src.fc45d0fd.js:39 Uncaught (in promise) Error: Cannot find module 'node_modules/process/browser.js'
    at newRequire (src.fc45d0fd.js:39)
    at newRequire (src.fc45d0fd.js:23)
    at localRequire (src.fc45d0fd.js:55)
    at Object.parcelRequire.node_modules/mobx/lib/mobx.module.js.process (tslib.es6.js:186)
    at newRequire (src.fc45d0fd.js:49)
    at localRequire (src.fc45d0fd.js:55)
    at Object.parcelRequire.node_modules/mobx-react/index.module.js.mobx (index.module.js:1)
    at newRequire (src.fc45d0fd.js:49)
    at localRequire (src.fc45d0fd.js:55)
    at Object.parcelRequire.src/index.tsx.tslib (index.tsx:8)

Any help or hints would be appreciated. I've already tried the example and it seems to be working fine.

Source

DomiR

All 5 comments

Using webpack for now...

DomiR on 8 Jan 2019

I know you just closed this, but I managed to get parcel working with my own project, so this might help. You have a different error than I did, but since you mentioned it was a worker issue, this could work. I found an issue on parcel's repo that mentioned that it cannot automatically make a web-worker into a separate bundle. I'm not super familiar with web workers, but I believe that the Worker constructor _has_ to be passed the Url to a seperate worker file. This means that when monaco calls getWorker(), it's not pointing to a seperate file, but instead the parcel bundle.

To fix it, I used the getWorkerUrl() function found in the esm-webpack sample.

window.MonacoEnvironment = {
    getWorkerUrl(moduleId, label) {
        if (label === 'json') {
        return './json.worker.bundle.js';
    }
    if (label === 'css') {
        return './css.worker.bundle.js';
    }
    if (label === 'html') {
        return './html.worker.bundle.js';
    }
    if (label === 'typescript' || label === 'javascript') {
        return './ts.worker.bundle.js';
    }
        return './editor.worker.bundle.js';
    },
};

Then, all you need to do is build the workers separately along with your project.

ROOT="$PWD/node_modules/monaco-editor/esm/vs"

parcel build "$ROOT/language/json/json.worker.js" --no-source-maps --log-level 1
parcel build "$ROOT/language/css/css.worker.js" --no-source-maps --log-level 1
parcel build "$ROOT/language/html/html.worker.js" --no-source-maps --log-level 1
parcel build "$ROOT/language/typescript/ts.worker.js" --no-source-maps --log-level 1
parcel build "$ROOT/editor/editor.worker.js" --no-source-maps --log-level 1

This builds the workers to the dist directory as well, but if you want to change their location, you'd add a --out-dir option and change the url in the getWorkerUrl() function to their new location. (keep in mind, the worker Url is relative to the final bundle).

This isn't ideal, but honestly, a 5 line script is far less config than using webpack.
I hope this works for you.

agillbraun on 10 Jan 2019

👍1

@AaronGillBraun Would you be interested to document the parcel usage in our docs at https://github.com/Microsoft/monaco-editor/blob/master/docs/integrate-esm.md . I would love to have both Parcel and Webpack documented.