Stuck on Loading... when loading from NPM

[saul-data]

I have read many issues that relate to loading from NPM. I think this might be resolved for Electron but we have a situation where we need a React web app in an air tight environment that cannot communicate to a CDN.

I have created a repo to demonstrate the issue. I have tried many things but can't seem to get it to work.

https://github.com/dataplane-app/dataplane-monaco

[saul-data]

OK I managed to get it to work but I can't get it to work with React Hooks

I don't know how to load the configuration for use with this:

const monaco2 = useMonaco();

It does work for this:

loader.init().then((monaco) => {
  const wrapper = document.getElementById("root");
  wrapper.style.height = "100vh";
  const properties = {
    value: "function hello() {\n\talert('Hello world!');\n}",
    language: "javascript"
  };

  monaco.editor.create(wrapper, properties);
});

[suren-atoyan]

@saul-data

1) if you want to load it with AMD you should do the following:

in package.json

  "scripts": {
    ...,
    "postinstall": "cp -R node_modules/monaco-editor/min/vs/ public/vs"
  },

in App.js

import React, {useEffect} from 'react';
import Editor, { loader, useMonaco } from "@monaco-editor/react";

loader.config({ paths: {vs: "/vs"} });

function App() {
  const monaco = useMonaco();

  useEffect(() => {
    if (monaco) {
      console.log("here is the monaco instance:", monaco);
    }
  }, [monaco]);

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

export default App;

2) if you want to import it from npm, you should do the following:

in App.js

import React, {useEffect} from 'react';
import Editor, { loader, useMonaco } from "@monaco-editor/react";

import * as monaco from 'monaco-editor';

loader.config({ monaco });

function App() {
  const monaco = useMonaco();

  useEffect(() => {
    if (monaco) {
      console.log("here is the monaco instance:", monaco);
    }
  }, [monaco]);

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

export default App;

NOTE: (ONLY FOR SECOND OPTION) React.StrictMode in development mode renders everything two times, this may lead to some issues in monaco (I am investigating it), as a temporary solution you can remove React.StrictMode from index.js

[suren-atoyan]

@saul-data could you please check the latest version?