Always load when used in electron #48

vaemc · 2019-12-25T08:11:14Z

Hi brother ，Always load when used in electron，Can't find the reason

suren-atoyan · 2019-12-25T16:35:46Z

Hello @vaemc, sure, we will try!

Could you please show the console?

vaemc · 2019-12-28T08:37:57Z

I'm sorry to have kept you waiting for a long time and found that the console has no important information

suren-atoyan · 2020-01-07T14:40:27Z

Hello @vaemc. Sorry for the late answer.

Could you please provide me a minimal code snippet, so I can reproduce your problem.

I have already created an electron app with minimal config and used this library and it works very well so far. Also, we have "users" of this library who are using electron and there were no issues.

Thank you!

LiamRiddell · 2020-01-07T22:09:13Z

@SurenAt93 I've got the same problem and I'm using this electron base.
Github

Steps:

Include @monaco-editor/react in package.json
Run yarn install
Include the sample code
Run yarn dev

Edit:
Looks like monaco.init() promise is never returned and it return removeEditor

suren-atoyan · 2020-01-08T08:50:34Z

Thank you @LiamRiddell. I will check it right now.

suren-atoyan · 2020-01-08T09:46:42Z

@LiamRiddell you are completely right, monaco.init() never ends. And the problem is that it can't load sources from CDN. The only thing is missing here is error handling during loading sources from cdn, which I will add in the next version.

@vaemc @LiamRiddell So, we have already faced this, and there is a solution for that, please read this discussion and let me know if there are still questions.

Thank you for your support!

LiamRiddell · 2020-01-08T13:18:28Z

@SurenAt93 Thanks for taking a look so fast!

I was close to solving last night then... since I changed loader config using monaco.config() but I was still using CDN.

Nonetheless this is by far cleanest implementation of Monaco, Thanks :)

suren-atoyan · 2020-01-08T15:35:37Z

Glad to hear that, will keep it open yet; to wait also @vaemc.

LiamRiddell · 2020-01-08T19:51:06Z

@SurenAt93 Just testing now. I still can't get this working. Here's the config below:

monaco.config({
  urls: {
    monacoLoader: '../node_modules/monaco-editor/min/vs/loader.js',
    monacoBase: '../node_modules/monaco-editor/min/vs'
  }
});

It finds the loader JS file and then just sits loading still. I've tried copying the file into the app

LiamRiddell · 2020-01-08T20:45:58Z

Okay, so I've managed to find the issue. It HAS to be an absolute data URI or it will fail to load. See below:

import Editor, { monaco } from '@monaco-editor/react';
const path = require('path')

// https://github.com/microsoft/monaco-editor-samples/blob/master/electron-amd-nodeIntegration/electron-index.html
function uriFromPath(_path) {
  let pathName = path.resolve(_path).replace(/\\/g, '/');

  if (pathName.length > 0 && pathName.charAt(0) !== '/') {
    pathName = `/${pathName}`;
  }
  return encodeURI(`file://${pathName}`);
}

monaco.config({
  urls: {
    monacoLoader: uriFromPath(
      path.join(__dirname, '../node_modules/monaco-editor/min/vs/loader.js')
    ),
    monacoBase: uriFromPath(
      path.join(__dirname, '../node_modules/monaco-editor/min/vs')
    )
  }
});

export default function MonacoEditorComponent() {
  const [isEditorReady, setIsEditorReady] = useState(false);
  const valueGetter = useRef(null);

  function handleEditorDidMount(_valueGetter) {
    setIsEditorReady(true);
    valueGetter.current = _valueGetter;
  }

  return (
    <>
      <Editor
        height="100%"
        width="100%"
        language="javascript"
        theme="dark"
        value="// write your code here"
        editorDidMount={handleEditorDidMount}
      />
    </>
  );
}

suren-atoyan · 2020-01-08T21:03:05Z

Ah, I see. Huh, it takes a long, but now everything is clear.

So, two things I need to do in the near future;

Add a section about possible problems while using this package with electron.
Handle error while loading monaco files from CDN or other places.

@LiamRiddell Again, thank you for your support.

LiamRiddell · 2020-01-08T22:34:15Z

@SurenAt93 I think your two action points are good idea.

I'm currently struggling to try to get underlying Monaco instance from Editor component. We can use the monaco.init() utility but then I have to handle the creation of the whole component.

Editor.js

// Original   
editorDidMount(editorRef.current.getValue.bind(editorRef.current), editorRef.current);
// Extended
editorDidMount(editorRef.current.getValue.bind(editorRef.current), monacoRef.current, editorRef.current);

The reason behind it is so people can register themes and languages without having to do lots of heavy lifting.

If you're happy I could make PR?

suren-atoyan · 2020-01-09T08:38:54Z

It's not a right from a logical point of view. Let me explain; editorDidMount is in single editor instance, maximum it can give you should be editorInstance. It isn't allowed to give you access to monacoInstance, you shouldn't be able to change global things from inside of a single instance <- technically you can do it (I'll show it bellow) as you can do something with window object, but things should be clear, it's out of responsibilities of editorDidMount.
We can use the monaco.init() utility but then I have to handle the creation of the whole component <- maybe there is a misunderstanding? You do not need to handle the creation of component. For example, if you need to do something with monaco instance:

import React from "react";
import ReactDOM from "react-dom";

import Editor, { monaco } from "@monaco-editor/react";

monaco
  .config({
    // ...
  })
  .init()
  .then(monacoInstance => {
    /* here is the instance of monaco, so you can use the `monaco.languages` or whatever you want */
    console.log("Log ::: Monaco ::: ", monacoInstance);
  })
  .catch(error =>
    console.error("An error occurred during initialization of Monaco: ", error)
  );

const App = _ => <Editor height="90vh" language="javascript" />;

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

or, if you really need to use it from inside of component, it's also possible:

import React, { useEffect } from "react";
import ReactDOM from "react-dom";

import Editor, { monaco } from "@monaco-editor/react";

const App = _ => {
  useEffect(_ => {
    monaco
      .init()
      .then(monacoInstance => {
        /* here is the instance of monaco, so you can use the `monaco.languages` or whatever you want */
        console.log("Log ::: Monaco ::: ", monacoInstance);
      });
  }, []);

  return <Editor height="90vh" language="javascript" />;
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Themes and languages are global things, they can be made separately;

import { monaco } from "@monaco-editor/react";

monaco
  .init()
  .then(monacoInstance => {
    monacoInstance.editor.defineTheme('my-super-theme', {
      // ...
    });
  });

The same for language creation.

Note that monaco.init() will work once and will return the same instance in further calls.

LiamRiddell · 2020-01-09T23:21:00Z

@SurenAt93 Yep, I've misunderstood the utility. Thanks for clarifying, I've fixed it in my code too :)

5cript · 2020-01-13T11:43:41Z

LiamRiddell's Solution #48 (comment) only works (for me), if I disable webSecurity in Electron, or it refuses to load the resources.
"Not allowed to load local resource".
I dont know how to feel about that.

mainWindow = new BrowserWindow({
	webPreferences: {
		webSecurity: false, // <- here
		nodeIntegration: true,
	},
})

suren-atoyan · 2020-01-14T05:38:09Z

@5cript are you trying to load Monaco from node_modules? Could you please provide the part of your code where you configure the Monaco?

5cript · 2020-01-14T18:35:06Z

electron version 7.1.8 btw.

This is basically just copy paste.

// in global scope of one of my files.
import Editor, { monaco } from '@monaco-editor/react';

function uriFromPath(_path) {
    let pathName = path.resolve(_path).replace(/\\/g, '/');

    if (pathName.length > 0 && pathName.charAt(0) !== '/') {
        pathName = `/${pathName}`;
    }
    return encodeURI(`file://${pathName}`);
}

monaco.config({
    urls: {
        monacoLoader: uriFromPath(
            // same result from node_modules. Does not do anything, if i get the path wrong.
            path.join(__dirname, '../public/vs/loader.js')
        ),
        monacoBase: uriFromPath(
            path.join(__dirname, '../public/vs')
        )
    }
});

I never tried deploying the application yet.

suren-atoyan · 2020-01-14T18:47:35Z

@5cript one more question: do you also use this boilerplate? I just want to reproduce your case in my side.

5cript · 2020-01-14T19:12:12Z

I used this tutorial for setup
https://dev.to/jsmanifest/create-your-first-react-desktop-application-in-electron-with-hot-reload-4jj5

vaemc · 2020-01-19T05:38:55Z

Awesome @LiamRiddell method solved my problem! thank you all @suren-atoyan

richard-livingston · 2020-02-09T16:15:31Z

I was having the same problem and managed to fix it while also keeping webSecurity: true.

The issue is that Monaco uses an AMD loader, and Electron uses CJS (when nodeIntegration: true).

I found that the easiest solution is to delete the references to all CJS related properties from the window before attempting to use Monaco:

delete window.require;
delete window.exports;
delete window.module;

// Optionally change the loader paths, it will work regardless
// In my case I wanted to copy these files into a local directory
monaco.config({
    urls: {
        monacoLoader: '/monaco-editor/min/vs/loader.js',
        monacoBase: '/monaco-editor/min/vs'
    }
});

const App = <Editor />

I found this solution by chance on the Electron website: https://www.electronjs.org/docs/faq#i-can-not-use-jqueryrequirejsmeteorangularjs-in-electron

suren-atoyan · 2020-02-11T12:13:19Z

Thank you for reply @richard-livingston. The problem is that the behavior is different with different electron setups. Some of them work without a hitch, some of them work with additional config (with changed urls), some of them give strange errors. I am wondering what setup/boilerplate do you use? And BTW, @5cript does it help you?

5cript · 2020-02-11T12:18:13Z

I have to test that later when I have the chance, but I'm confident that it will.

richard-livingston · 2020-02-11T13:38:00Z

Hi @suren-atoyan

I am using create-react-app, electron ({webSecurity: true, nodeIntegration: true}) rescripts (allows rewrite of webpack.config so that node built-ins are not "empty").

I followed this guide: https://www.codementor.io/@randyfindley/how-to-build-an-electron-app-using-create-react-app-and-electron-builder-ss1k0sfer

@5cript good luck.

siva-kranthi · 2020-04-21T18:23:10Z

I was having the same problem and managed to fix it while also keeping webSecurity: true.

The issue is that Monaco uses an AMD loader, and Electron uses CJS (when nodeIntegration: true).

I found that the easiest solution is to delete the references to all CJS related properties from the window before attempting to use Monaco:
delete window.require;
delete window.exports;
delete window.module;

// Optionally change the loader paths, it will work regardless
// In my case I wanted to copy these files into a local directory
monaco.config({
    urls: {
        monacoLoader: '/monaco-editor/min/vs/loader.js',
        monacoBase: '/monaco-editor/min/vs'
    }
});

const App = <Editor />
I found this solution by chance on the Electron website: https://www.electronjs.org/docs/faq#i-can-not-use-jqueryrequirejsmeteorangularjs-in-electron

Worked for me with electron-webpack. But for local files loading, I still disabled webSecurity: false. It was not allowing without that

siva-kranthi · 2020-05-13T06:29:00Z

With electron-webpack it is working fine in dev mode & production on windows. On Ubuntu, it is not working in Dev mode. But working in prod mode

monaco.config({ paths: { vs: path.join(__static, "/vs") } });

The difference what I found in dev mode was in windows it is trying to load with file:/// URL. But on ubuntu, it is trying to load with localhost:9080. Hence it was failing.

The output of path.join(__static, "/vs") is pointing to absolute paths in both Ubuntu& windows

ubuntu - /home/user/workspace/Git/bla/static/vs
windows - D:\Git\bla\static\vs

I don't know why in ubuntu monaco is trying to load the resources using localhost server instead of file:/// URI

wangzongming · 2020-07-15T06:34:36Z

TypeError: Cannot set property 'configScriptSrc' of undefined

Did you ever make that mistake? In the manner of @LiamRiddell

use: electron + typescript

const path: any = require('path')
function uriFromPath(_path: string) {
    let pathName: string = path.resolve(_path).replace(/\\/g, '/');

    if (pathName.length > 0 && pathName.charAt(0) !== '/') {
        pathName = `/${pathName}`;
    }
    return encodeURI(`file://${pathName}`);
}
const monacoConfig: (obj: any) => any = monaco.config; 
monacoConfig({
    urls: {
        monacoLoader: uriFromPath(
            path.join(__dirname, '../../../node_modules/monaco-editor/min/vs/loader.js')
        ),
        monacoBase: uriFromPath(
            path.join(__dirname, '../../../node_modules/monaco-editor/min/vs')
        )
    }
});

suren-atoyan · 2020-07-15T06:56:35Z

TypeError: Cannot set property 'configScriptSrc' of undefined

Did you ever make that mistake? In the manner of @LiamRiddell

use: electron + typescript

const path: any = require('path')
function uriFromPath(_path: string) {
    let pathName: string = path.resolve(_path).replace(/\\/g, '/');

    if (pathName.length > 0 && pathName.charAt(0) !== '/') {
        pathName = `/${pathName}`;
    }
    return encodeURI(`file://${pathName}`);
}
const monacoConfig: (obj: any) => any = monaco.config; 
monacoConfig({
    urls: {
        monacoLoader: uriFromPath(
            path.join(__dirname, '../../../node_modules/monaco-editor/min/vs/loader.js')
        ),
        monacoBase: uriFromPath(
            path.join(__dirname, '../../../node_modules/monaco-editor/min/vs')
        )
    }
});

hmm, strange. BTW; monaco.config({ urls: ... }) is deprecated, use monaco.config({ paths: ... }) instead. It's described here

wangzongming · 2020-07-15T07:15:06Z

TypeError: Cannot set property 'configScriptSrc' of undefined
Did you ever make that mistake? In the manner of @LiamRiddell
use: electron + typescript

const path: any = require('path')
function uriFromPath(_path: string) {
    let pathName: string = path.resolve(_path).replace(/\\/g, '/');

    if (pathName.length > 0 && pathName.charAt(0) !== '/') {
        pathName = `/${pathName}`;
    }
    return encodeURI(`file://${pathName}`);
}
const monacoConfig: (obj: any) => any = monaco.config; 
monacoConfig({
    urls: {
        monacoLoader: uriFromPath(
            path.join(__dirname, '../../../node_modules/monaco-editor/min/vs/loader.js')
        ),
        monacoBase: uriFromPath(
            path.join(__dirname, '../../../node_modules/monaco-editor/min/vs')
        )
    }
});

hmm, strange. BTW; monaco.config({ urls: ... }) is deprecated, use monaco.config({ paths: ... }) instead. It's described here

thank you .

I don't know why this is undefind

suren-atoyan · 2020-07-15T07:31:49Z

TypeError: Cannot set property 'configScriptSrc' of undefined
Did you ever make that mistake? In the manner of @LiamRiddell
use: electron + typescript
const path: any = require('path')
function uriFromPath(_path: string) {
    let pathName: string = path.resolve(_path).replace(/\\/g, '/');

    if (pathName.length > 0 && pathName.charAt(0) !== '/') {
        pathName = `/${pathName}`;
    }
    return encodeURI(`file://${pathName}`);
}
const monacoConfig: (obj: any) => any = monaco.config; 
monacoConfig({
    urls: {
        monacoLoader: uriFromPath(
            path.join(__dirname, '../../../node_modules/monaco-editor/min/vs/loader.js')
        ),
        monacoBase: uriFromPath(
            path.join(__dirname, '../../../node_modules/monaco-editor/min/vs')
        )
    }
});
hmm, strange. BTW; monaco.config({ urls: ... }) is deprecated, use monaco.config({ paths: ... }) instead. It's described here
thank you .

I don't know why this is undefind

could you please change the version of the library?

wangzongming · 2020-07-15T07:37:15Z

TypeError: Cannot set property 'configScriptSrc' of undefined
Did you ever make that mistake? In the manner of @LiamRiddell
use: electron + typescript
const path: any = require('path')
function uriFromPath(_path: string) {
    let pathName: string = path.resolve(_path).replace(/\\/g, '/');

    if (pathName.length > 0 && pathName.charAt(0) !== '/') {
        pathName = `/${pathName}`;
    }
    return encodeURI(`file://${pathName}`);
}
const monacoConfig: (obj: any) => any = monaco.config; 
monacoConfig({
    urls: {
        monacoLoader: uriFromPath(
            path.join(__dirname, '../../../node_modules/monaco-editor/min/vs/loader.js')
        ),
        monacoBase: uriFromPath(
            path.join(__dirname, '../../../node_modules/monaco-editor/min/vs')
        )
    }
});
hmm, strange. BTW; monaco.config({ urls: ... }) is deprecated, use monaco.config({ paths: ... }) instead. It's described here
thank you .

I don't know why this is undefind
could you please change the version of the library?

I'm using @monaco-editor/react@3.4.1.
Ha ha, I've used the monaco-editor as an alternative and I'm not going to struggle. Thank you for your reply.

ShallowGreen · 2021-06-01T07:49:53Z

dev env

I am using absolute URL node_modules/monaco-editor/min/vs/ to loader dependence,
But how can I loader dependence in application after build, which used in other computor
is there a way to build the dependence into application?

suren-atoyan closed this as completed Feb 4, 2020

suren-atoyan mentioned this issue Mar 2, 2020

Monaco Editor Stuck At Loading Screen !!! #58

Closed

maifeeulasad mentioned this issue Jan 18, 2021

Uncaught (in promise) Error: ENOENT: no such file or directory, open 'https:/cdn.jsdelivr.net/npm/monaco-editor@0.21.2/min/vs/editor/editor.main.js' #166

Closed

This issue was closed.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Always load when used in electron #48

Always load when used in electron #48

vaemc commented Dec 25, 2019 •

edited

Loading

suren-atoyan commented Dec 25, 2019

vaemc commented Dec 28, 2019

suren-atoyan commented Jan 7, 2020

LiamRiddell commented Jan 7, 2020 •

edited

Loading

suren-atoyan commented Jan 8, 2020

suren-atoyan commented Jan 8, 2020

LiamRiddell commented Jan 8, 2020

suren-atoyan commented Jan 8, 2020

LiamRiddell commented Jan 8, 2020

LiamRiddell commented Jan 8, 2020

suren-atoyan commented Jan 8, 2020

LiamRiddell commented Jan 8, 2020

suren-atoyan commented Jan 9, 2020

LiamRiddell commented Jan 9, 2020

5cript commented Jan 13, 2020

suren-atoyan commented Jan 14, 2020

5cript commented Jan 14, 2020

suren-atoyan commented Jan 14, 2020

5cript commented Jan 14, 2020 •

edited

Loading

vaemc commented Jan 19, 2020

richard-livingston commented Feb 9, 2020

suren-atoyan commented Feb 11, 2020

5cript commented Feb 11, 2020 •

edited

Loading

richard-livingston commented Feb 11, 2020

siva-kranthi commented Apr 21, 2020 •

edited

Loading

siva-kranthi commented May 13, 2020

wangzongming commented Jul 15, 2020 •

edited

Loading

suren-atoyan commented Jul 15, 2020

wangzongming commented Jul 15, 2020

suren-atoyan commented Jul 15, 2020

wangzongming commented Jul 15, 2020

ShallowGreen commented Jun 1, 2021

Always load when used in electron #48

Always load when used in electron #48

Comments

vaemc commented Dec 25, 2019 • edited Loading

suren-atoyan commented Dec 25, 2019

vaemc commented Dec 28, 2019

suren-atoyan commented Jan 7, 2020

LiamRiddell commented Jan 7, 2020 • edited Loading

suren-atoyan commented Jan 8, 2020

suren-atoyan commented Jan 8, 2020

LiamRiddell commented Jan 8, 2020

suren-atoyan commented Jan 8, 2020

LiamRiddell commented Jan 8, 2020

LiamRiddell commented Jan 8, 2020

suren-atoyan commented Jan 8, 2020

LiamRiddell commented Jan 8, 2020

suren-atoyan commented Jan 9, 2020

LiamRiddell commented Jan 9, 2020

5cript commented Jan 13, 2020

suren-atoyan commented Jan 14, 2020

5cript commented Jan 14, 2020

suren-atoyan commented Jan 14, 2020

5cript commented Jan 14, 2020 • edited Loading

vaemc commented Jan 19, 2020

richard-livingston commented Feb 9, 2020

suren-atoyan commented Feb 11, 2020

5cript commented Feb 11, 2020 • edited Loading

richard-livingston commented Feb 11, 2020

siva-kranthi commented Apr 21, 2020 • edited Loading

siva-kranthi commented May 13, 2020

wangzongming commented Jul 15, 2020 • edited Loading

suren-atoyan commented Jul 15, 2020

wangzongming commented Jul 15, 2020

suren-atoyan commented Jul 15, 2020

wangzongming commented Jul 15, 2020

ShallowGreen commented Jun 1, 2021

dev env

vaemc commented Dec 25, 2019 •

edited

Loading

LiamRiddell commented Jan 7, 2020 •

edited

Loading

5cript commented Jan 14, 2020 •

edited

Loading

5cript commented Feb 11, 2020 •

edited

Loading

siva-kranthi commented Apr 21, 2020 •

edited

Loading

wangzongming commented Jul 15, 2020 •

edited

Loading