Use monaco-editor, Error: "Cannot find module '.' " in react.

[Williamlook]

monaco-editor version: 0.13.1
Browser:chrome
OS: win10
Steps or JS usage snippet reproducing the issue:

[Williamlook]

[Williamlook]

please,help me ,THINK YOU;

[Williamlook]

@joaomoreno @avelino @egamma @auchenberg @

[masad-frost]

Don't think anyone can give much help without the code for this. Looks like a webpack issue

[kristiandupont]

@Williamlook I had a similar issue and found the solution in this article: https://medium.com/@haugboelle/short-guide-to-using-monaco-with-create-react-app-26a1acad8ebe

[alexdima]

@Williamlook Given the current information you have provided, we cannot help you. Have you tried one of the working samples e.g. https://github.com/Microsoft/monaco-editor-samples/tree/master/browser-esm-webpack

[dsherret]

@alexandrudima I'm able to reproduce this when using a project setup with create-react-app (see #82 -- solutions provided in there are not solid).

[alexdima]

This thread might be related - microsoft/monaco-editor-webpack-plugin#16

[Fer0x]

@dsherret Steps to make MonacoEditor work with create-react-app@next and webpack@4:

1. Do yarn eject
2. Make following changes in config/webpack.config.dev.js.
3. Replace entry field with this:

entry: {
  app: [
    // We ship a few polyfills by default:
    require.resolve('./polyfills'),
    // Include an alternative client for WebpackDevServer. A client's job is to
    // connect to WebpackDevServer by a socket and get notified about changes.
    // When you save a file, the client will either apply hot updates (in case
    // of CSS changes), or refresh the page (in case of JS changes). When you
    // make a syntax error, this client will display a syntax error overlay.
    // Note: instead of the default WebpackDevServer client, we use a custom one
    // to bring better experience for Create React App users. You can replace
    // the line below with these two lines if you prefer the stock client:
    // require.resolve('webpack-dev-server/client') + '?/',
    // require.resolve('webpack/hot/dev-server'),
    require.resolve('react-dev-utils/webpackHotDevClient'),
    // Finally, this is your app's code:
    paths.appIndexJs,
    // We include the app code last so that if there is a runtime error during
    // initialization, it doesn't blow up the WebpackDevServer client, and
    // changing JS code would still trigger a refresh.
  ],
  'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js',
  'json.worker': 'monaco-editor/esm/vs/language/json/json.worker',
  // 'css.worker': 'monaco-editor/esm/vs/language/css/css.worker',
  // 'html.worker': 'monaco-editor/esm/vs/language/html/html.worker',
  // 'ts.worker': 'monaco-editor/esm/vs/language/typescript/ts.worker',
},

Most likely you have to uncomment additional workers for your project needs.

4. Add globalObject: 'self', to output object.
5. Replace filename: 'static/js/bundle.js', with filename: 'static/js/[name].bundle.js',
6. Install @babel/plugin-syntax-dynamic-import dependency and add to second babel-loader config, which commented as // Process any JS outside of the app with Babel., field options following line:

                 plugins: [
                  require.resolve('@babel/plugin-syntax-dynamic-import'),
                ],

7. Add to root field plugins following lines:

  new webpack.IgnorePlugin(/^((fs)|(path)|(os)|(crypto)|(source-map-support))$/, /vs(\/|\\)language(\/|\\)typescript(\/|\\)lib/),
  new webpack.ContextReplacementPlugin(
    /monaco-editor(\\|\/)esm(\\|\/)vs(\\|\/)editor(\\|\/)common(\\|\/)services/,
    __dirname
  ),

Thats all with webpack config. You have to do same changes with config/webpack.config.prod.js.
8. In your application code use monaco-editor like this:

import React from 'react';
import MonacoEditor from 'react-monaco-editor';

self.MonacoEnvironment = {
  getWorkerUrl(moduleId, label) {
    if (label === 'json') {
      return '/static/js/json.worker.bundle.js';
    }
    // if (label === 'css') {
    //   return '/static/js/css.worker.bundle.js';
    // }
    // if (label === 'html') {
    //   return '/static/js/html.worker.bundle.js';
    // }
    // if (label === 'typescript' || label === 'javascript') {
    //   return '/static/js/ts.worker.bundle.js';
    // }
    return '/static/js/editor.worker.bundle.js';
  },
};

function CodeEditor() {
  return (
	<MonacoEditor language="json" />
  );
}

You have to uncomment some workers in getWorkerUrl() dependent on your projects needs.

[dsherret]

Hmm... I was just trying out a bunch of stuff and I was able to fix it by adding a MonacoEnvironment.getWorkerUrl that specifies the workerMain.js (there was a message saying to create a getWorkerUrl or getWorker:

<script src="%PUBLIC_URL%/vs/loader.js"></script>
<script>
  require.config({
    paths: {
      "vs": "vs"
    }
  });
  window.MonacoEnvironment = {
    getWorkerUrl: function (workerId, label) {
      return "vs/base/worker/workerMain.js";
    }
  };
</script>

(I have node_modules/monaco-editor/min/vs copied to the public/vs folder)

It was previously erroring when retrieving code suggestions (so on every keypress). I'm using typescript as the language by the way.

See my commit here: dsherret/ts-ast-viewer@5dd3fde

Also, thanks @Fer0x, but ejecting caused some other issues for me and I got lazy looking into it more.

[jeff3dx]

@dsherret solution worked for me. I tried many approaches found around the web (webpack config hacks, every webpack monaco plugin, etc.) and all failed in various ways. This solution is relatively simple and works with the Typescript variation of create-react-app. BTW I went with using monaco-editor directly instead of react-monaco-editor to remove that abstraction as a troubleshooting variable, and stayed with it. Thanks @dsherret.

[liuyangc3]

@dsherret thanks, but how to add this in jest ?