react-monaco-editor

react-monaco-editor copied to clipboard

I'm using the editor through react-app-rewired, and all works find with 'react-app-rewired start', however when I do a 'react-app-rewired build' the resulting application has errors in the console.

Package.json (partial):

"react-app-rewired": "^2.1.8",
"react-monaco-editor": "^0.45.0",

config-overrides.js:

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

function addMonacoEditorSupport(config) {
  config.plugins.push(new MonacoWebpackPlugin({ languages: ["json"] }));
}

module.exports = {
  webpack: function (config) {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    addMonacoEditorSupport(config);

    return config;
  }
};

Now when the editor loads I see this in the console:

Could not create web worker(s). Falling back to loading web worker code in main thread, which might cause UI freezes.
Uncaught SyntaxError: Unexpected token '<'

Both from simpleworker.js

The FAQ states 'I see the warning "Could not create web worker". What should I do?

HTML5 does not allow pages loaded on file:// to create web workers. Please load the editor with a web server on http:// or https:// schemes.'

Am I supposed to configure something to control the way the code is loaded or something? 'file://' does not exist in my codebase so its nothing I've added myself.

I had the same problem, currently developing with webpack 5 + React 18