Monaco Editor inside Vaadin

Hello everyone,
I am trying to display the monaco-editor ( inside Vaadin, it shows the pure javascript editor, but no css. I am guessing its because of webpack - but there are working examples with webpack, so I don’t know.
If anyone has any tips or can look inside the small project file - it would be much appreciated.

my project (need help here) >>

UPDATE: I don’t want to copy the whole “node_modules/monaco-editor” folder into “/META-INF/resources/” any ideas?

Hi, is possible that the resources do not have the correct location.
In a similar project, I spent many hours thinking that the problem was webpack, but finally, the problem was the file location

The project I refer to is this [mx-graph]
( if you want to take a look

This example is useful [dhtmlx]

Johny Ortega:
… the problem was the file location

Hey Johny, thanks for a quick reply. Yes It in fact missing resources… but the solution was to put everything inside the
resources/META-INF/resources/node_modules/monaco_editor/ folder, which I guess is an ugly solution but I don’t really get how I can import (publish) the whole folder without putting it there.

You can see the current version in the github link above. Thanks for help.

I am new to webpack and vaadin, maybe anyone has a tip where i should look into?
how can I enable webpack to pack my referenced node_modules webcomponent into the project?
It is really ugly to have to copy the whole node_modules/monaco-editor folder into the “/META-INF/resources/” Folder.

Thanks a lot!

did you eventually find another way to get the monaco editor working or did you end up with the workaround of copying the folder node_modules/monaco-editor to resources/META-INF/resources/node_modules/monaco-editor

Also, did you maybe find out the reason why the monaco-editor makes problems here? Since one doesn’t have to do that with every @NpmPackage dependency.


It’s much easier to use cdn to load the monaco-editor like in this topic:

The main problem with Monaco editor is the configuration with webpack, you can see the instructions in their documentation here:

You can check a demo project I tried few months ago.

If I remembered it correctly, I had to change the webpack.config.js and install some npm package manually (monaco-editor-plugin at least). The css is not working correctly if I’m using the css from webpack (still the css from using cdn). (133 KB)