Monaco-editor: Electron and Monaco-Editor Problem

Created on 22 May 2018  路  1Comment  路  Source: microsoft/monaco-editor

Node.js require and AMD require conflict so Monaco-Editor won't load in electron mode.
If I add the the following configuration to Electron BrowserWindow:

win = new BrowserWindow({ width: 1200, height: 750, webPreferences: { nodeIntegration: false } });

Monaco Editor will load successfully in Electron mode, but I unfortunately need the node integration in Electron.

I have this code and I am trying to make it work in Electron too:

ngAfterViewInit(): void {
    if (loadedMonaco) {
      // Wait until monaco editor is available
      loadPromise.then(() => {
        this.initMonaco(this.options);
      });
    } else {
      loadedMonaco = true;
      loadPromise = new Promise<void>((resolve: any) => {
        const baseUrl = this.config.baseUrl || '/assets';
        if (typeof ((<any>window).monaco) === 'object') {
          resolve();
          return;
        }
        const onGotAmdLoader: any = () => {
          // Load monaco
          (<any>window).require.config({ paths: { 'vs': `${baseUrl}/monaco/vs` } });
          (<any>window).require(['vs/editor/editor.main'], () => {
            if (typeof this.config.onMonacoLoad === 'function') {
              this.config.onMonacoLoad();
            }
            this.initMonaco(this.options);
            resolve();
          });
        };

        // Load AMD loader if necessary
        if (!(<any>window).require) {
          const loaderScript: HTMLScriptElement = document.createElement('script');
          loaderScript.type = 'text/javascript';
          loaderScript.src = `${baseUrl}/monaco/vs/loader.js`;
          loaderScript.addEventListener('load', onGotAmdLoader);
          document.body.appendChild(loaderScript);
        } else {
          onGotAmdLoader();
        }
      });
    }
  }

In the function onGotAmdLoader I get the exception that require.config is not a function.

I have tried to set:

let nodeRequire;
    if (global) {
       nodeRequire = (<any>global).require;
}

before the function onGotAmdLoader and then inside it

 if (global) {
                        (<any>global).require = nodeRequire;
}

It is working on web but not in Electron, can someone point me here in the right direction ?

*question

Most helpful comment

>All comments

Was this page helpful?
0 / 5 - 0 ratings