load monaco from node_modules

[khoshrou]

load monaco from node_modules

[suren-atoyan]

Hi guys. The new version is here. (v1.2.0).

You can modify config as shown here.

For downloading monaco from your files

So, if you are using CRA, for example, you can install monaco-editor package:

yarn add monaco-editor # (npm install monaco-editor)

after that move/copy the minified (it's for an example) version of editor to your (CRA) public folder:

mv node_modules/monaco-editor/min/vs/ ./public

and now, by changing configs with the new api, you can load monaco files from your public folder:

import { monaco } from '@monaco-editor/react';

monaco
  .config({
    urls: {
      monacoLoader: '/vs/loader.js',
      monacoBase: '/vs'
    },
  });

Please check it and let me know if it covers your cases. Thank you!

[suren-atoyan]

@NxRoot could you please

instead of this:

import * as monaco from 'monaco-editor'
import Editor, { loader } from "@monaco-editor/react"
const path = window.require("path") // remember to set contextIsolation to false

function ensureFirstBackSlash(str) {
  return str.length > 0 && str.charAt(0) !== "/"
      ? "/" + str
      : str;
}

function uriFromPath(_path) {
  const pathName = path.resolve(_path).replace(/\\/g, "/");
  return encodeURI("file://" + ensureFirstBackSlash(pathName));
}

loader.config({
  paths: {
    vs: uriFromPath(
      path.join(__dirname, "../node_modules/monaco-editor/min/vs")
    )
  },
  monaco // the real solution is here, injecting monaco into loader
});

export default function App() {
  return (
   <Editor
     height="90vh"
     defaultLanguage="javascript"
     defaultValue="// some comment"
   />
  );
}

try just this:

import * as monaco from 'monaco-editor'
import Editor, { loader } from "@monaco-editor/react"

loader.config({ monaco });

export default function App() {
  return (
   <Editor
     height="90vh"
     defaultLanguage="javascript"
     defaultValue="// some comment"
   />
  );
}

Once you set monaco in the config, other config fields will be ignored, so, no need to have loader.config({ path: ... })

[elisherer]

If you want a fresh copy of the latest installed monaco-editor use copy-webpack-plugin:

npm i -D copy-webpack-plugin

Inside webpack.config:

const CopyWebpackPlugin = require("copy-webpack-plugin");

// in the plugin section
new CopyWebpackPlugin([
  { from: "node_modules/monaco-editor/min/vs/", to: "vs" },
  //{ from: "node_modules/monaco-editor/min-maps/vs/", to: "min-maps/vs" } // source-maps
]),

[suren-atoyan]

What is the difference between

monaco.config({
  urls: {
    monacoLoader: "/vs/loader.js",
    monacoBase: "/vs"
  }
});

and

monaco.config({
  paths: {
    vs: '...',
  },
  'vs/nls' : {
    availableLanguages: {
      '*': 'de',
    },
  },
});

you can compare

this one

monaco.config({
  urls: {
    monacoLoader: '/vs/loader.js',
    monacoBase: '/vs'
  }
});

and

monaco.config({
  paths: {
    vs: '/vs',
  }
});

this one ('vs/nls' is about localization).

And they are identical from a technical point of view; just the first one is deprecated in the last version (the second one is the new way to configure it).

[elisherer]

@martonlanga , I see it does work as I written it,
In my code it is conditioned to be on when in development mode:

    new CopyWebpackPlugin({
      patterns: [
        { from: "public", to: "." },
        { from: "node_modules/monaco-editor/min/vs/", to: "vs" },
        !PRODUCTION && { from: "node_modules/monaco-editor/min-maps/vs/", to: "min-maps/vs" }
      ].filter(Boolean)
    })

Maybe you are missing the initialization?

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

[NxRoot]

@suren-atoyan Thank you very much, its working!

import * as monaco from 'monaco-editor'
import Editor, { loader } from "@monaco-editor/react"

loader.config({ monaco });

export default function App() {
  return (
   <Editor
     height="90vh"
     defaultLanguage="javascript"
     defaultValue="// some comment"
   />
  );
}

Once you set monaco in the config, other config fields will be ignored, so, no need to have loader.config({ path: ... })

[suren-atoyan]

Hello, thank you for your feedback.

Unfortunately, in the current version, it's not possible.

But you can notice that there is a config file and theoretically you can load it from where you want (wherever you have access to). I just need to make it customizable. It should be something like this:

import { monaco } from '@monaco-editor/react';

monaco
  .config({...})
  .init()
...

So, you can load it for example from your public folder.
Can you load it from node_modules in that case?
It depends on your static server configuration.

I will make the config customizable in the next version and will keep you up to date here, for now, let it stay open.

[suren-atoyan]

Hi @zzeebbii, I hope it will be ready tomorrow.

[suren-atoyan]

If you are not using CRA, and you can customize your webpack configs, and also you are okay with a single bundle of monaco, so, in that case, there are other solutions/packages/libraries to do that:

Please find those libraries here

[khoshrou]

I checked the network section and library is loaded from local folder
Again Thanks

[suren-atoyan]

Hello @lucid3v. Sorry, that was a typo, it should be import { monaco } from '@monaco-editor/react';

[suren-atoyan]

Hello @lucid3v. Sorry, that was a typo, it should be import { monaco } from '@monaco-editor/react';

Thanks! I'm getting further now. One more question... how do I render the Editor with the new import using:
import { monaco } from '@monaco-editor/react';`

my code(on my offline machine) is as this:

import {monaco as Editor} from "@monaco-editor/react"

Editor.config({
urls: {
monacoLoader: "/vs/loader.js",
monacoBase: "/vs"
}
});

...further down...

return (
<Editor 
language="json"
height="90vh"
width="100%"
theme="light"
value="// some code"
/>

Your case will look like something like this. Please check it out.

[khoshrou]

Hi again
That would be kind of essential consider you like to create an electron or a nwjs desktop app

[suren-atoyan]

I absolutely agree, so I will do it first.

[zzeebbii]

Hi @SurenAt93
Do you have any idea when this new version will be available with configurable configuration?

[zzeebbii]

Hi @SurenAt93,
Thank you for such a quick update (Y). Yes, it will resolve the problem of loading from CDN and now we can load assets from disk which is quite good in many cases.

I know loading mechanism of monaco-editor is quite complex, but I was wondering if there is any possibility to just build one bundle instead of copying files and then referencing those files? Just curious :-)

[suren-atoyan]

Yes, of course, there is a way, to make a single bundle. But during making that very bundle we will need some extra webpack plugins, which is not "possible" in case of CRA; that's why this package/library exists.

[zzeebbii]

Actually, I am not using CRA. I am building my bundles with manual webpack configuration that's why I was asking. I can include the monaco-editor in my bundle but then I'm not sure how should I use configuration with your package. I mean, does your plugin check first if monaco exists and use that or it always loads the monaco from configuration we provide like CDN or resource on disk.

[suren-atoyan]

@khoshrou could you please check the new version. And if it covers your case we can close the issue.

[khoshrou]

Hi Suren
I just tested new version, its amazing.
it works as i expected. Thanks again.
I have a question
In your component we dont bundle monaco. do we loose any thing this way?

[suren-atoyan]

Of course no. It will work as expected. By avoiding bundling we avoid wepack configuration. Just it. Originally monaco worked without bundling; on the official home page of monaco it works without bundles. (check the "network" section in the devtools to see more)

[lucid3v]

Hi guys. The new version is here. (v1.2.0).

You can modify config as shown here.

For downloading monaco from your files

So, if you are using CRA, for example, you can install monaco-editor package:

yarn add monaco-editor # (npm install monaco-editor)

after that move/copy the minified (it's for an example) version of editor to your (CRA) public folder:

mv node_modules/monaco-editor/min/vs/ ./public

and now, by changing configs with the new api, you can load monaco files from your public folder:

import { monaco } from './monaco-react/src';

monaco
  .config({
    urls: {
      monacoLoader: '/vs/loader.js',
      monacoBase: '/vs'
    },
  });

Please check it and let me know if it covers your cases. Thank you!

Hi, where is the
import { monaco } from './monaco-react/src';
coming from?

I can't seem to have this in my project. My package.json has

@monaco-editor/react = "^1.2.1"
monaco-editor = "^0.17.1

[lucid3v]

Hello @lucid3v. Sorry, that was a typo, it should be import { monaco } from '@monaco-editor/react';

Thanks! That works. I had some issues getting the import working and here is my setup for anyone else...

my code(on my offline machine) is as this:

import {monaco} from "@monaco-editor/react"
import Editor from "@monaco-editor/react"
monaco.config({
urls: {
monacoLoader: "/vs/loader.js",
monacoBase: "/vs"
}
});

...further down...

return (
<Editor 
language="json"
height="90vh"
width="100%"
theme="light"
value="// some code"
/>

[khoshrou]

Do you say in this way we don't need to copy vs to public folder?
and how it's done in a (create-react-app) without ejecting?

[suren-atoyan]

Do you say in this way we don't need to copy vs to public folder?
and how it's done in a (create-react-app) without ejecting?

I guess yes, it's about to avoid copying vs folder into public one. But to be honest, I also don't understand how it will work with CRA.

[siva-kranthi]

What is the difference between

monaco.config({
  urls: {
    monacoLoader: "/vs/loader.js",
    monacoBase: "/vs"
  }
});

and

monaco.config({
  paths: {
    vs: '...',
  },
  'vs/nls' : {
    availableLanguages: {
      '*': 'de',
    },
  },
});

[benjaminbours]

@suren-atoyan There is something wrong with the CDN. I'm using the default config but it seems the CDN itself resolve badly this path, is that right and how is it possible? Do you have any workaround?

You can use monaco.config and load it from another CDN or from you local files.

[benjaminbours]

@suren-atoyan I have tried this of course. I'm using the same cdn link that your demo,

But still the same issue so I don't understand.

I downgraded to use the same version as you on the demo, the 3.1.0. Same issue. The only thing I didn't tried is using local files and it's because I would like to use CDN. I did nothing special, so I'm really lost I'm just following a basic example.

I have the same problem with any CDN. There is something wrong on my side. Well I will keep investigate.

[suren-atoyan]

@suren-atoyan I have tried this of course. I'm using the same cdn link that your demo,

But still the same issue so I don't understand.

I downgraded to use the same version as you on the demo, the 3.1.0. Same issue. The only thing I didn't tried is using local files and it's because I would like to use CDN. I did nothing special, so I'm really lost I'm just following a basic example.

I have the same problem with any CDN. There is something wrong on my side. Well I will keep investigate.

Is it possible to provide a reproducible snippet?

If no, so, please:

1. provide some information about your environment (browser, browser version, os, etc.)
2. check your extensions, try it in incognito mode for example.
3. check the flags in the chrome (maybe you have disabled workers)

[benjaminbours]

I'm not in a CRA environment. https://create-react-app.dev/docs/making-a-progressive-web-app/ . It should be an issue about workers configuration. I have a big hole in my knowledge about workers, time to fill it. Thanks anyway and sorry for bothering you. :)

[martonlanga]

new CopyWebpackPlugin([
{ from: "node_modules/monaco-editor/min/vs/", to: "vs" },
//{ from: "node_modules/monaco-editor/min-maps/vs/", to: "min-maps/vs" } // source-maps
]),

@elisherer I see you tried to include the source maps as well. Did that work for you? I'm still getting warning saying DevTools failed to parse SourceMap.

Only could make them disappear by disabling Javascript Source Maps in chrome settings. Wonder if there is a better way.

[martonlanga]

@elisherer Alright, thanks for your answer!

Everything including init is working fine, except source-maps.

I'm using Snowpack, maybe it has something to do with that.

[dmitryshelomanov]

still can not be taken from the modules ?

[elisherer]

If using webpack, use monaco-editor-webpack-plugin (official plugin by Microsoft)

[dmitryshelomanov]

not working
langs provided by external scripts (not from node_modules)

[NxRoot]

For people looking for an electron solution.

Visit the links from electron-forge to help you understand what we are doing

After days searching, this worked for me.

• Created a project with Electron-Forge + Webpack + Typescript

npx create-electron-app my-new-app --template=typescript-webpack

• Install react and react-dom

npm i react react-dom

• Install monaco-editor and @monaco-editor/react

npm i monaco-editor @monaco-editor/react 

• Install monaco-editor-webpack-plugin

npm i monaco-editor-webpack-plugin

• add webpack plugin to webpack.plugins.js

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

plugins: [new MonacoWebpackPlugin()]

• Inject monaco inside loader config somewhere in your renderer

import * as monaco from 'monaco-editor'
import Editor, { loader } from "@monaco-editor/react"
const path = window.require("path") // remember to set contextIsolation to false

function ensureFirstBackSlash(str) {
  return str.length > 0 && str.charAt(0) !== "/"
      ? "/" + str
      : str;
}

function uriFromPath(_path) {
  const pathName = path.resolve(_path).replace(/\\/g, "/");
  return encodeURI("file://" + ensureFirstBackSlash(pathName));
}

loader.config({
  paths: {
    vs: uriFromPath(
      path.join(__dirname, "../node_modules/monaco-editor/min/vs")
    )
  },
  monaco // the real solution is here, injecting monaco into loader
});

export default function App() {
  return (
   <Editor
     height="90vh"
     defaultLanguage="javascript"
     defaultValue="// some comment"
   />
  );
}

More Info

The real solution was injecting monaco into the loader config

My Electron window settings

const mainWindow = new BrowserWindow({
    height: 600,
    width: 800,
    webPreferences: {
      preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
      nodeIntegration: true,
      contextIsolation: false,
      webSecurity: false
    },
});

[vinodronold]

import * as monaco from 'monaco-editor'
import Editor, { loader } from "@monaco-editor/react"

loader.config({ monaco });

This should be part of the documentation for electron users.

[twigs67]

This looked like such a sweet solution, but unfortunately it did not work for me. I'm getting this error:

Error: Unexpected usage
    at EditorSimpleWorker.loadForeignModule (http://localhost:3000/static/js/vendors-node_modules_mui_material_CardHeader_CardHeader_js-node_modules_monaco-editor_esm_vs_-88dd7c.chunk.js:98341:27)
    at http://localhost:3000/static/js/vendors-node_modules_mui_material_CardHeader_CardHeader_js-node_modules_monaco-editor_esm_vs_-88dd7c.chunk.js:54028:22
    at async http://localhost:3000/static/js/vendors-node_modules_monaco-editor_esm_vs_language_typescript_tsMode_js.chunk.js:131:16
    at async WorkerManager.getLanguageServiceWorker (http://localhost:3000/static/js/vendors-node_modules_monaco-editor_esm_vs_language_typescript_tsMode_js.chunk.js:137:20)
    at async DiagnosticsAdapter._doValidate (http://localhost:3000/static/js/vendors-node_modules_monaco-editor_esm_vs_language_typescript_tsMode_js.chunk.js:427:20)
Error: Unexpected usage

Error: Unexpected usage
    at EditorSimpleWorker.loadForeignModule (http://localhost:3000/static/js/vendors-node_modules_mui_material_CardHeader_CardHeader_js-node_modules_monaco-editor_esm_vs_-88dd7c.chunk.js:98341:27)
    at http://localhost:3000/static/js/vendors-node_modules_mui_material_CardHeader_CardHeader_js-node_modules_monaco-editor_esm_vs_-88dd7c.chunk.js:54028:22
    at async http://localhost:3000/static/js/vendors-node_modules_monaco-editor_esm_vs_language_typescript_tsMode_js.chunk.js:131:16
    at async WorkerManager.getLanguageServiceWorker (http://localhost:3000/static/js/vendors-node_modules_monaco-editor_esm_vs_language_typescript_tsMode_js.chunk.js:137:20)
    at async DiagnosticsAdapter._doValidate (http://localhost:3000/static/js/vendors-node_modules_monaco-editor_esm_vs_language_typescript_tsMode_js.chunk.js:427:20)
    at http://localhost:3000/static/js/vendors-node_modules_mui_material_CardHeader_CardHeader_js-node_modules_monaco-editor_esm_vs_-88dd7c.chunk.js:27337:17

after trying:

import * as monaco from 'monaco-editor'
import Editor, { loader } from "@monaco-editor/react"

loader.config({ monaco });

As others have suggested. Any thoughts? Next step is to eject CRA and use the MonacoWebpackPlugin

[elisherer]

I suggest using customize-cra (instead of ejecting)

Example config-overrides.js

const { override, addWebpackPlugin } = require("customize-cra");
const MonacoEditorWebpackPlugin = require("monaco-editor-webpack-plugin");

module.exports = {
  webpack: override(
    addWebpackPlugin(
      new MonacoEditorWebpackPlugin({
        languages: ["javascript", "json", "xml"],
      })
    )
  )
};  

[zedfight]

set monaco in the config, other config fields will be ignored

hi @suren-atoyan After setting loader.config({ monaco }), options fields is invalid. how can i fix it?😅

e.g:

import * as monaco from 'monaco-editor';
import Editor, { loader } from '@monaco-editor/react';

loader.config({ monaco });

<Editor language="json" options={{autoIndent: 'advanced'}} />

[xiaopujun]

Hi guys. The new version is here. (v1.2.0).

You can modify config as shown here.

For downloading monaco from your files

So, if you are using CRA, for example, you can install monaco-editor package:

yarn add monaco-editor # (npm install monaco-editor)

after that move/copy the minified (it's for an example) version of editor to your (CRA) public folder:

mv node_modules/monaco-editor/min/vs/ ./public

and now, by changing configs with the new api, you can load monaco files from your public folder:

import { monaco } from '@monaco-editor/react';

monaco
  .config({
    urls: {
      monacoLoader: '/vs/loader.js',
      monacoBase: '/vs'
    },
  });

Please check it and let me know if it covers your cases. Thank you!

Hi suren, thanks for making this React version of Monaco editor. it simplifies my work a lot.

I can't load monaco editor using cdn due to usage scenario. So I need to load it locally. I used CRA. and processed it as you described above. But I found that

import { monaco } from '@monaco-editor/react'.

There seems to be an error, I sent this to import the monaco instance directly for configuration.

The version I'm using is "@monaco-editor/react": "4.2.1", which is a fairly late version, and I'm not sure if there are any major differences in usage between that and the v1.2.0 version provided above.

Also my project is based on TypeScript. this may be one of the influencing factors. Hope to get your reply.

Thank you!

This is my code:

[elisherer]

Hi guys. The new version is here. (v1.2.0).
You can modify config as shown here.

For downloading monaco from your files

So, if you are using CRA, for example, you can install monaco-editor package:

yarn add monaco-editor # (npm install monaco-editor)

after that move/copy the minified (it's for an example) version of editor to your (CRA) public folder:

mv node_modules/monaco-editor/min/vs/ ./public

and now, by changing configs with the new api, you can load monaco files from your public folder:

import { monaco } from '@monaco-editor/react';

monaco
  .config({
    urls: {
      monacoLoader: '/vs/loader.js',
      monacoBase: '/vs'
    },
  });

Please check it and let me know if it covers your cases. Thank you!

Hi suren, thanks for making this React version of Monaco editor. it simplifies my work a lot.

I can't load monaco editor using cdn due to usage scenario. So I need to load it locally. I used CRA. and processed it as you described above. But I found that

import { monaco } from '@monaco-editor/react'.

There seems to be an error, I sent this to import the monaco instance directly for configuration.

The version I'm using is "@monaco-editor/react": "4.2.1", which is a fairly late version, and I'm not sure if there are any major differences in usage between that and the v1.2.0 version provided above.

Also my project is based on TypeScript. this may be one of the influencing factors. Hope to get your reply.

Thank you!

This is my code:

try

import type { Monaco } from "@monaco-editor/react";

[xiaopujun]

it means I need to switch the version to v1.2.0 and then tweak it the way you provided ?

@elisherer

[arkitwg]

Hi @suren-atoyan , I've electron app where have to load files from file:// instead of CDN. I've tried the above solution with latest version but still getting below error:

Uncaught Error: Unexpected usage

Error: Unexpected usage
    at EditorSimpleWorker.loadForeignModule (editorSimpleWorker.js?39ad:492:1)
    at eval (webWorker.js?e579:38:1)
    at async eval (tsMode.js?3397:88:1)
    at eval (errors.js?6fb9:15:1)

Could you please help me out this, thanks!