摩纳哥编辑器不会在React应用中显示

Question

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.

Answer 1

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.

Answer 2

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}
    />
  );
}