Monaco Editor Stuck At Loading Screen !!!

[Mohsin Memon]

Monaco Editor Stuck At Loading Screen !!!

[Suren Atoyan]

Could you please provide a little bit more information? Do you use Electron? If yes, please check this discussion.

[Mohsin Memon]

But the problem is I don't have a public file in my config !!

[Suren Atoyan]

Okay, and what you have? To help you I must know the details. As I understand, you use Electron, do you use CRA? In which way are they integrated? Is there a code snippet, github (or other) repo to see the implementation?

Thank you.

[Mohsin Memon]

I dont use CRA.
I am using this template :
https://github.com/HendrixString/adobe-cep-react-create
I am making an extension for adobe after effects !!!

[Suren Atoyan]

As I am not able to reproduce it in my local machine I can guess two scenarios in which it will not work.

1. I guess, In the template you shared, it's not possible to load sources from CDN. This library loads monaco sources from CDN by default, so, first, you need to configure it, and load sources from your local files. You can read more detailed about it in the discussion I have already shared earlier.

2. Monaco uses workers, and does lots of stuff under the hood; maybe the execution environment used inside of Adobe is not compatible with it.

[Mohsin Memon]

I couldn't find any solution . I have tried everything !!!

[Mohsin Memon]

If u can configure it for me and provide some code snippets it would be very helpful.
I guess there is some problem with the build scripts of the Template !!

[Mohsin Memon]

I dont think it is the problem of adobe's execution environment . As it works in the dev build( only with the monaco editor webpack plugin).But does not work in the production build - Does not work even with the Monaco editor webpack plugin.

Any help is highly appreciated .

[Mohsin Memon]

Can SomeOne Please Provide a Solution !!!

[Owen Melbourne]

Steps to reproduce:

• git clone --depth 1 --single-branch https://github.com/electron-react-boilerplate/electron-react-- boilerplate.git monaco-bug
• cd monaco-bug
• yarn
• yarn add @monaco-editor/react
• yarn add monaco-editor-webpack-plugin
• Update configs/webpack.config.renderer.dev.babel.js and add new MonacoWebpackPlugin() into the plugins array
• Update app/components/Home.tsx to:

import React from 'react';
import Editor from '@monaco-editor/react';

export default () => <Editor height="90vh" language="javascript" />;

• Run yarn dev

Then you just end up with...

[Mohsin Memon]

I am not using electron

[Mohsin Memon]

I am using this template to build Adobe cep extensions
https://github.com/HendrixString/adobe-cep-react-create

[Mohsin Memon]

If someone could help me it would be great !!!

[Suren Atoyan]

Steps to reproduce:

• git clone --depth 1 --single-branch https://github.com/electron-react-boilerplate/electron-react-- boilerplate.git monaco-bug
• cd monaco-bug
• yarn
• yarn add @monaco-editor/react
• yarn add monaco-editor-webpack-plugin
• Update configs/webpack.config.renderer.dev.babel.js and add new MonacoWebpackPlugin() into the plugins array
• Update app/components/Home.tsx to:

import React from 'react';
import Editor from '@monaco-editor/react';

export default () => <Editor height="90vh" language="javascript" />;

• Run yarn dev

Then you just end up with...

Hello @OwenMelbz, let me check.

[Suren Atoyan]

@OwenMelbz you don't need steps 5 and 6. The problem is that the library tries to download sources from CDN, which in this setup isn't allowed. Please read this discussion to see how you can download monaco from node_modules or from other local places.

[Owen Melbourne]

Hey, I had eventually got through that and got it working :) so an example component that works for my specific setup was...

// webpack.config.js

import MonacoEditorWebpackPlugin from 'monaco-editor-webpack-plugin';

module.exports = {
    // ..... blah,
    plugins: [
        new MonacoEditorWebpackPlugin(),
    ]
}

// SomeComponent.js

import React from 'react';
import path from 'path';
import Editor, { monaco } from '@monaco-editor/react';

const 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 () => <Editor width="100%" height="500px" language="javascript" value="const hello ='world';" />

[Suren Atoyan]

Hey, I had eventually got through that and got it working :) so an example component that works for my specific setup was...

// webpack.config.js

import MonacoEditorWebpackPlugin from 'monaco-editor-webpack-plugin';

module.exports = {
    // ..... blah,
    plugins: [
        new MonacoEditorWebpackPlugin(),
    ]
}

// SomeComponent.js

import React from 'react';
import path from 'path';
import Editor, { monaco } from '@monaco-editor/react';

const 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 () => <Editor width="100%" height="500px" language="javascript" value="const hello ='world';" />

That's great, but please try without monaco-editor-webpack-plugin, I don't think you need it.

[Mohsin Memon]

Can u plzz help me out aswell

[Mohsin Memon]

I Tried the above method just now. Still Does Not Work !!!

[Suren Atoyan]

Can u plzz help me out aswell

Unfortunately, I am not able to do it. As I've already mentioned you have a special setup, and to be able to reproduce your case I have to have adobe photoshop installed on my machine (which is a paid software).

[Mohsin Memon]

I am not using it for photoshop. I am using that template for making an after effects extension

[Mohsin Memon]

I got it working yahoo!!!! . What i did was that i put the url like this :
'C:/Users//Desktop/<Project_filename>/node_modules/monaco-editor/min/vs/loader.js'
I got it to work without the webpack plugin

[Mohsin Memon]

It does not show the loading thing now.
And By the way thanks for the providing the react component Suren Atoyan

[ForChange客服小弟]

@OwenMelbz you don't need steps 5 and 6. The problem is that the library tries to download sources from CDN, which in this setup isn't allowed. Please read this discussion to see how you can download monaco from node_modules or from other local places.

why electron can not use CDN mode