Example use with @monaco-editor

[bangonkali]

Hi, is there an example integration with @monaco-editor npm package. I'm not using webpack only cra at the moment. It seems @monaco-editor npm package has built-in loader but I'm not sure how to integrate it this way.

[remcohaszing]

I would suggest trying to get it to work with monaco-editor first, then see if you can use a library such as @monaco-editor/react. I’m not familiar with create-react-app, but since it uses Webpack 4, I used worker-loader.

This is what I tried:

yarn create react-app .
yarn add worker-loader monaco-yaml monaco-editor

Then edit App.js to contain:

import logo from './logo.svg';
import './App.css';

import { editor } from 'monaco-editor';
import { setDiagnosticsOptions } from 'monaco-yaml';

// NOTE: using loader syntax becuase Yaml worker imports editor.worker directly and that
// import shouldn't go through loader syntax.
// eslint-disable-next-line import/no-webpack-loader-syntax
import EditorWorker from 'worker-loader!monaco-editor/esm/vs/editor/editor.worker?filename=editor.worker.js';
// eslint-disable-next-line import/no-webpack-loader-syntax
import YamlWorker from 'worker-loader!monaco-yaml/lib/esm/yaml.worker?filename=yaml.worker.js';
import { useEffect, useRef } from 'react';

window.MonacoEnvironment = {
  getWorker(workerId, label) {
    if (label === 'yaml') {
      return new YamlWorker();
    }
    return new EditorWorker();
  },
};

setDiagnosticsOptions({
  validate: true,
  enableSchemaRequest: true,
  hover: true,
  completion: true,
  schemas: [
    {
      // Id of the first schema
      uri: 'http://myserver/foo-schema.json',
      // Associate with our model
      fileMatch: ['*'],
      schema: {
        // Id of the first schema
        id: 'http://myserver/foo-schema.json',
        type: 'object',
        properties: {
          p1: {
            enum: ['v1', 'v2'],
          },
          p2: {
            // Reference the second schema
            $ref: 'http://myserver/bar-schema.json',
          },
        },
      },
    },
    {
      // Id of the first schema
      uri: 'http://myserver/bar-schema.json',
      schema: {
        // Id of the first schema
        id: 'http://myserver/bar-schema.json',
        type: 'object',
        properties: {
          q1: {
            enum: ['x1', 'x2'],
          },
        },
      },
    },
  ],
});

function App() {
  const ref = useRef()

  useEffect(() => {
    if(ref.current) {
      console.log(ref.current)
      editor.create(document.getElementById(ref.current), {
        value: 'p1: ',
        language: 'yaml',
      });
    }
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
      <div ref={ref} style={{width: 800, height: 600 }} />
    </div>
  );
}

export default App;

I’m getting the following terminal output:

Compiled with warnings.

Conflict: Multiple assets emit different content to the same filename static/js/bundle.worker.js

Conflict: Multiple assets emit different content to the same filename static/js/bundle.worker.js.map

And the following error in the browser console:

Uncaught TypeError: Cannot read property 'addEventListener' of null
    at new DomListener (dom.js:33)
    at Module.addDisposableListener (dom.js:47)
    at new StandaloneKeybindingService (simpleServices.js:196)
    at standaloneServices.js:159
    at ensure (standaloneServices.js:151)
    at new DynamicStandaloneServices (standaloneServices.js:159)
    at withAllStandaloneServices (standaloneEditor.js:40)
    at Object.create (standaloneEditor.js:61)
    at App.js:73
    at invokePassiveEffectCreate (react-dom.development.js:23487)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at flushPassiveEffectsImpl (react-dom.development.js:23574)
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushPassiveEffects (react-dom.development.js:23447)
    at react-dom.development.js:23324
    at workLoop (scheduler.development.js:417)
    at flushWork (scheduler.development.js:390)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:157)

I think the error in the browser console is caused by the warning in the terminal window. I suggest you look at that first.

[delaprada]

@remcohaszing I use your demo and change document.getElementById(ref.current) into ref.current . It works well.

[remcohaszing]

I also use this with React in a real world application, but the OP is having issues integrating it into create-react-app, which I can’t get to work easily either.

[delaprada]

@remcohaszing Thanks for your reply. I came across the same problem as you :

Compiled with warnings.

Conflict: Multiple assets emit different content to the same filename static/js/bundle.worker.js

Conflict: Multiple assets emit different content to the same filename static/js/bundle.worker.js.map

I guess it's the problem of the webpack configuration of the react app. But I don’t know much about webpack, so I don’t know how to solve this problem.

Despite these conflicts, it does not affect the rendering of the page.

[delaprada]

Finally i find the solution for this conflict. It is because the output filename for this two workers ( editor worker and yaml worker ) are the same in webpack.config.js, eg: static/js/bundle.js. Just change the static/js/bundle.js into static/js/[name].bundle.js, and the conflict will be solved 😌.
Refer to https://stackoverflow.com/questions/42148632/conflict-multiple-assets-emit-to-the-same-filename

[remcohaszing]

Thanks for reporting this! Although I must say I already figured it must be something like this 😅

The issue I’m having that I don’t know how to tweak Webpack configurations in a create-react-app project.

Also I think this may be considered a bug in create-react-app. Perhaps it should be reported there.

[delaprada]

Thanks for your reply. You can run this command: npm run eject in create-react-app project. This command will expose the webpack config of the project, like this:

The configuration of react is a little bit troublesome 😅.

[remcohaszing]

I’m closing this issue as I have confirmed it works in CRA by following the instructions from #92 (comment)