Editor file loading gets hung, unable to display file content, due to loading config from CDN https://cdn.jsdelivr.net

Describe the bug Editor loading gets hung, as a result fails to display the content of the file on the UI

Issue seems to be in Deploying and running from secure environment, due to loading monaco-editor config from a CDN

Exact Error is Refused to load the script 'https://cdn.jsdelivr.net/npm/monaco-editor@0.21.2/min/vs/loader.js' because it violates the following Content Security Policy

Below is the screenshot

To Reproduce Happens when u deploy the code in a prod like environment and URL is running as HTTPS

import React from "react";
import ReactDOM from "react-dom";
import Editor, { loader } from "@monaco-editor/react";
import { loader } from '@monaco-editor/react';
loader.config({ paths: { vs: 'path-to-your-node_modules/node_modules/monaco-editor/min/vs' } });

function App() {
  return (
   <Editor
     height="90vh"
     defaultLanguage="javascript"
     defaultValue="// some comment"
   />
  );
}

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

Expected behavior Editor should be able to load the file content There has to be more neater and easier way to load the config file

Screenshots Even though above is what is prescribed in another issue, it does not work and gives below syntax error in loading

Desktop (please complete the following information): I tried this on Mac, Chrome & Edge browser, but can confirm happening on all OS and browser

Additional context I had to solve using a very nasty workaround

• npm install monaco-editor
• Copied entire node_modules/monaco-editor to public folder
• Copied entire node_modules/monaco-editor to src/ folder load the file by referring from “src” folder

Can we have a easier fix for this, as this way it is very difficult to Dockerise and Deploy, a lot of security related issues as we have to copy an external module to application’s source code

Please provide some pointers or direction too fix this clean way

[zoonman]

It would make a lot of sense to load editor from an npm/yarn package without using any CDN. I’d prefer to let react-scripts to perform all necessary bundling etc.

[suren-atoyan]

It would make a lot of sense to load editor from an npm/yarn package without using any CDN. I’d prefer to let react-scripts to perform all necessary bundling etc.

@rajiff @zoonman @vadimshvetsov @ColmanHumphrey we did this intentionally, to avoid using additional webpack plugins. react-scripts is not able to bundle monaco editor sources without an additional webpack plugin. Which means you have to eject or rewire your CRA application.

The whole idea of this library is to make monaco editor work without using any webpack plugins (which is required in applications generated by CRA). The workaround we’ve used here is not ideal, sure, it would be great to have consistency across the maintenance of packages, but unfortunately, this was the best workaround we could find to solve the problem.

I had to solve using a very nasty workaround

By using loader utility you can configure the library to load monaco sources from wherever you want. If you want to load it from your local files + you have only access to /public folder due to your setup/web-server configuration, it means that your mentioned “very nasty workaround” is the only way.