Monaco Editor Stuck At Loading Screen !!!

[ghost]

No description provided.

[suren-atoyan]

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

[ghost]

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.

[ghost]

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.

[ghost]

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

[ghost]

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 !!

[ghost]

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 .

[ghost]

Can SomeOne Please Provide a Solution !!!

[OwenMelbz]

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...

[ghost]

I am not using electron

[ghost]

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

[ghost]

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.

[OwenMelbz]

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.

[ghost]

Can u plzz help me out aswell

[ghost]

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).

[ghost]

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

[ghost]

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

[ghost]

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

[xmsz]

@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

[Krishna-sm]

personally i am facing this problem on next js project check here

i solve this code with 1 configuration

where i find

visit docs

const MonacoEditor = dynamic(() => import('@monaco-editor/react'), { ssr: false });

// usage

  <MonacoEditor
   
  
                    theme='vs-dark'
                    options={{
                        wordWrap:'on',
                        wrappingStrategy:'advanced', 
                    }}
                    className=' w-full h-[50vh] lg:h-[63vh]' 
                    onChange={(e)=>SetFieldValue(selectFile,e as string)}
                    loading={<LoaderComponent/>}
                    language={selectFile.toLowerCase()} value={state[selectFile as keyof InitialiValuesProps]} />

now it's work fine