CODEWITHSUNDEEP
javascriptjsonreactjseditormonaco-editor
elenaHristova
elenaHristova

Reputation: 721

Monaco editor won't show in a react app

I started using react-monaco-editor library because I want to add a cool json editor in my web react application.

I followed the instruction on github: react-monaco-editor-DOC

but it seems like I am missing something which is probably not shared in the DOC for the webpack setup. After I used the webpack setup instructions from the doc, import the library and added the lines: 

import MonacoEditor from 'react-monaco-editor';

class Editor extends React.Component{

  editorDidMount(editor, monaco) {
    console.log('editorDidMount', editor);
    editor.focus();
  }

  render(){	
    const options = {
      selectOnLineNumbers: true
    };

    return(
      <div>
        <MonacoEditor
         width="800"
         height="600"
         language="json"
         value="// some code"
         options={options}
         editorDidMount={this.editorDidMount}/>
      </div>
      );
  }
}

I get an empty text area.

Upvotes: 0

Views: 4805

Answers (2)

Jone
Jone

Reputation: 31

here is my sample of require part:

render() {
  const requireConfig = {
    url: 'node_modules/monaco-editor/min/vs/loader.js',
    paths: {
      vs: 'node_modules/monaco-editor/min/vs'
    }
  };

  return (
    <MonacoEditor
      ...
      requireConfig={requireConfig}
    />
  );
}

Upvotes: 1

Andrew Tatomyr
Andrew Tatomyr

Reputation: 373

I've encountered the same issue. The solution was to configure Webpack to copy a vs folder from inside an npm module or to use a require.config. Another way is to put it into a public folder manually. I'm not sure whether it's the correct way, but in my case this workaround works just perfect.

Upvotes: 1

Related Questions