CODEWITHSUNDEEP
javascriptreactjsnpmcreate-react-appmonaco-editor
Jasmin Virdi
Jasmin Virdi

Reputation: 101

Cannot find module 'monaco-editor/esm/vs/editor/editor.worker' with create react app

I have used react-monaco-editor in my current project, but facing issues getting it running. I have followed the docs and made the respective changes in my files.

Here is my package.json file

{
  "name": "chatbot_compiler",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-monaco-editor": "^0.34.0",
    "react-scripts": "3.4.0"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject",
    "lint:fix": "eslint src/**/*.js --fix"
  },
  "eslintConfig": {
    "extends": "react-app",
    "rules": {
      "indent": [
        "error",
        2
      ]
    }
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "monaco-editor-webpack-plugin": "^1.9.0",
    "prettier": "^1.19.1",
    "react-app-rewired": "^2.1.5"
  }
}

and here is my config-overrides.js file

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

module.exports = function override(config, env) {
  config.resolve = {
    alias: {
      "monaco-editor": "monaco-editor/esm/vs/editor/editor.api.js"
    }
  };
  config.plugins.push(
    new MonacoWebpackPlugin({
      languages: ["json"]
    })
  );
  return config;
};

I am getting this error when running npm start

Cannot find module 'monaco-editor/esm/vs/editor/editor.worker'

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `react-app-rewired start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Any help would be highly appreciated. Thanks in advance :)

Upvotes: 4

Views: 5061

Answers (3)

Rishi Vedpathak
Rishi Vedpathak

Reputation: 778

In case you using https://github.com/suren-atoyan/monaco-react, then below config will help. Solved this issue by adding moduleNameMapper to the jest config. I have my jest config added to my package.json. Ref,

"jest": {
  "moduleNameMapper": {
    "monaco-editor": "<rootDir>/node_modules/@monaco-editor/react"
  }
}

Ref - https://github.com/suren-atoyan/monaco-react/issues/383#issuecomment-1304557569

Upvotes: 0

inoutwhy
inoutwhy

Reputation: 624

It's version issue, I use "react-monaco-editor": "^0.43.0" with "monaco-editor-webpack-plugin": "^4.0.0",, the issue is gone.

Upvotes: 1

Rui Martins
Rui Martins

Reputation: 1

Can you try to install monaco-editor too, as it uses it under the hood. It's only a peer dependency so won't install with this package.

Upvotes: 0

Related Questions