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 ?
Most helpful comment
Have you seen https://github.com/Microsoft/monaco-editor-samples/tree/master/electron-amd ?