Search code examples
reactjsweb-workerproductionmonaco-editorworker-loader

Monaco Editor - Web Workers cannot be loaded in production build

I'm currently implementing the Monaco Editor from Microsoft (https://github.com/microsoft/monaco-editor), with a plugin for yaml validation, autocompletion, etc. . (https://github.com/remcohaszing/monaco-yaml) in our react js APP.

Worker Configuration

Editor Creation

Imports

Maybe it is also important to tell you, that our authentication process gets managed via Keycloak.

When I'm running my code in development (React-scripts start) everything is working as expected. I can create the editor, the schema gets implemented correctly and autocompletion is also working.

BUT as soon as I try to use the editor in PRODUCTION Build it seems that it cant load my workers correctly, following the editor is not working as it should.

I always get these errors in production:

Production Errors #1

Production Errors #2

I tried to use monaco-editor-webpack-plugin with React Rewired but it didnt have an positive effect either.

I also tried to use the worker loader to load the workers, but it also didnt help

Any more Ideas how I can fix this ? Has this to do something with CORS ? Because it tries to load files in a url? Or am I missing something ?

Thanks in advance

What I tried: Monaco Webpack Plugin, plain webpack, worker-loader Expected Behaviour: Monaco Editor with Monaco Yaml working in production build. Current behaviour: Working fine in development build, cannot load workers in production.

Solution

  • The problem was, that my keycloak (on a different port) rejected to load the working scripts. After handling this problems, the editor is working fine.