Monaco-editor: How to import this library in a create-react-app?

[kasperpeulen]

I'm using from https://github.com/facebookincubator/create-react-app:

So far, I haven't had problems importing npm modules with the following syntax:
import _ from 'lodash'

However, I couldn't get this library to work in this setup. This seems like a super powerful editor, just can not get it to work.

[NiloCK]

An old issue, but with a lot of thumbs up. Someone has done the work of wrapping the monaco editor in a react component: https://www.npmjs.com/package/@types/react-monaco-editor

Note that there are some issues with this implementation. To make it work myself, I included

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.1/require.min.js"></script>
<script>
    require.config({
      paths: { 'vs': './vs' }
    })
</script>

in the public/index.html file of my create-react-app project. I also placed the 'vs' folder from the monaco node module in my public folder (see that the require.config() function is looking for it. The files in this folder needed to be served from my own site rather than a CDN (as suggested by the react-monaco-editor readme) in order to avoid browsers complaining about running 'foreign' webworkers.

Good luck. I had more trouble than I expected setting this up, but it's going swimmingly now.

[YairoR]

@NiloCK you saved me from giving up! Thanks!

[lidermanrony]

Now that monaco supports esm modules (thanks!), i was really hoping i'll be able to use the monaco-editor npm package in a create-react-app application (since the later is using webpack under the hood).

Unfortunately, monaco-editor-smpale seem to suggest i need to configure webpack with plugins, which is not possible in create-react-app without ejecting.

Did anyone successfully import monaco-editor package in create-react-app without ejecting and without doing weird stuff like loading monaco's loader.js?

[nico-bellante]

Bump.
Also wondering the above question.

[henrikhaugboelle]

I stumbled upon the issue of getting Monaco up and running with create-react-app again this evening and dug up a solution that I've used before which circumvents copying files to the public folder – so I decided to do a small write up, you can find it here:

https://medium.com/@haugboelle/short-guide-to-using-monaco-with-create-react-app-26a1acad8ebe

[liudonghua123]

Hope Microsoft release monaco-editor-react package offically 👍

[liudonghua123]

@kasperpeulen, after tried a lot of method mentioned here, I found a elegant way by replace react-scripts with react-app-rewired, add a config-overrides.js file contains

/* config-overrides.js */
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = function override(config, env) {
  if (!config.plugins) {
    config.plugins = [];
  }
  config.plugins.push(
    new MonacoWebpackPlugin()
  );
  return config;
}

The full functional demo can be found on https://github.com/liudonghua123/create-react-app-monaco-editor

[wufeng87]

I use it this way. seems working fine currently.. (copy vs source directory to public/js/monaco)

      window.require = { paths: { 'vs': `${_url_origin}${prefix}/js/monaco/vs` } };

        $('head').append($('<link rel="stylesheet" type="text/css" />')
            .attr('href', `${_url_origin}${prefix}/js/monaco/vs/editor/editor.main.css`));

        $.when(

            $.getScript( `${_url_origin}${prefix}/js/monaco/vs/language/typescript/tsMode.js` ),
            $.getScript( `${_url_origin}${prefix}/js/monaco/vs/basic-languages/javascript/javascript.js` ),
            $.getScript( `${_url_origin}${prefix}/js/monaco/vs/language/typescript/tsWorker.js` ),

            $.getScript(  `${_url_origin}${prefix}/js/monaco/vs/loader.js` ),
            $.getScript( `${_url_origin}${prefix}/js/monaco/vs/editor/editor.main.nls.js` ),
            $.getScript( `${_url_origin}${prefix}/js/monaco/vs/editor/editor.main.js` ),
            $.Deferred(function( deferred ){
                console.log('Deferred')
                $( deferred.resolve );
                setTimeout(() => {

                    callback && callback()
                }, 10000);
            })
        ).done(function(){
            debugger;
            // TODO done function not worked
            console.log('done done done ')
            //place your code here, the scripts are all loaded
            // callback && callback()
        });

[suren-atoyan]

@monaco-editor/react

I think it will help you guys.

I faced this issue about 2 years ago. I wrote a wrapper, for monaco to use it with an application powered by create-react-app. And use that solution in many projects. Now I publish it. Basically, it’s a monaco editor wrapper for painless integration with React applications without the need of webpack (or another module bundler) configuration files.

[bitjson]

For anyone wanting to use the react-monaco-editor library, this scripts-version fork includes everything you need by default.

JS-only:

npx create-react-app --scripts-version=@bitauth/react-scripts-bitauth-ide my-app

Typescript:

npx create-react-app --typescript --scripts-version=@bitauth/react-scripts-bitauth-ide my-app

And you can see an example of it working with a custom theme, custom language, range markers (underlining errors), hover providers, and autocompletion providers in bitauth-ide.

[kellengreen]

This is the cleanest setup I was able to come up with. It's not ideal since Monaco is now outside of npm, but it got the job done for my needs.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/editor/editor.main.css">
  </head>
  <body>
    <div id="root"></div>
    <script>var require={paths:{'vs':'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs'}};</script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/loader.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/editor/editor.main.nls.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/editor/editor.main.js"></script>
  </body>
</html>

Then

import React from 'react'

export default function Monaco({ config, onEditor }) {
  const elem = React.useRef()
  const monaco = React.useRef(window.monaco)
  const [editor, setEditor] = React.useState()

  React.useEffect(() => {
    if (elem.current && monaco.current && !editor) {
      const newEditor = monaco.current.editor.create(elem.current, config)
      setEditor(newEditor)
    }
  }, [config, elem, monaco, editor])

  React.useEffect(() => {
    if (editor) {
      onEditor?.(editor)
    }
  }, [editor, onEditor])

  return <div ref={elem} />
}

[jbalesteri]

So I stumbled on this post in search of a way to get syntax highlighting and autocomplete working with Monaco Editor. I tried a few of the solutions above and was not satisfied with the result. So I took a different approach....

• Made new app from CRA (create react app).
• Added create-react-app-rewired (here)
  
  
  
  • yarn add react-app-rewired
  
  
  • Created file "config-overrides.js" in project root dir.
  
  
  • Updated the 'scripts' section of package.json according to create-react-app-rewired (side note, the commented out lines are there for display, don't copy/paste since comments dont work in JSON)...
  
  

  /* package.json */

"scripts": {
    // "start": "react-scripts start",
    "start": "react-app-rewired start",
    // "build": "react-scripts build",
    "build": "react-app-rewired build",
    // "test": "react-scripts test --env=jsdom",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject" // dont change eject
}

• Added Monaco Editor Webpack Loader Plugin (here)
  
  
  
  • yarn add monaco-editor-webpack-plugin
  
  
  • Added the following to the config-overrides file...
  
  

/* config-overrides.js */
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = function override(config, env) {
    config.plugins = [
        ...config.plugins,
        new MonacoWebpackPlugin()
    ]

    return config;
}

Syntax highlighting and auto complete now works. I hope this helps someone out there 🎉

[suren-atoyan]

Yet another update of @monaco-editor/react