react-monaco-editor: Error: cannot find 'monaco-editor'

I’ve been getting the this when I try to use this package (latest with monaco-editor v0.13.1):

Here’s my webpack build:

const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = {
  mode:'development',
  devtool: 'source-map',
  optimization: {
    splitChunks:{}
  },
  entry: {
    app: './ui/client/index.js'
  },
  context: path.resolve(__dirname),
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js',
    publicPath: '/dist/'
  },
  plugins: [
    new ExtractTextPlugin('styles.css'),
    new webpack.DefinePlugin({
      "process.env": {
        BROWSER: JSON.stringify(true)
      }
    }),
    new MonacoWebpackPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        include: path.resolve(__dirname),
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' })
      }
    ]
  }
};

Any idea why? I’d appreaciate your response!

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 2
Comments: 18 (1 by maintainers)

Commits related to this issue

test(webapp): fix monaco-editor in tests From https://github.com/react-monaco-editor/react-monaco-editor/issues/133#issuecomment-403960502 — committed to marvindv/markdown-notebook by marvindv 4 years ago

Most upvoted comments

I ran into pretty much the same thing with jest in test using this module,

 FAIL  __tests__/components/Layout.spec.js
  ● Test suite failed to run

    Cannot find module 'monaco-editor' from 'editor.js'

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:221:17)
      at Object.<anonymous> (node_modules/react-monaco-editor/lib/editor.js:11:21)

had to “alias” monaco-editor to react-monaco-editor to help jest resolve it:

...
"moduleNameMapper": {
  "^.+\\.(css|scss)$": "identity-obj-proxy",
  "monaco-editor": "<rootDir>/node_modules/react-monaco-editor"
},
...

+28

sanusart on Jul 10, 2018

Hey @expobrain, sorry I should’ve included it initially. Here’s the full error:

Error: Cannot find module 'monaco-editor'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/irfanbaqui/ia-app/node_modules/react-monaco-editor/lib/editor.js:11:21)
    at Module._compile (module.js:652:30)
    at Module._compile (/Users/irfanbaqui/ia-app/node_modules/pirates/lib/index.js:91:24)
    at Module._extensions..js (module.js:663:10)
    at Object.newLoader [as .js] (/Users/irfanbaqui/ia-app/node_modules/pirates/lib/index.js:96:7)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/irfanbaqui/ia-app/node_modules/react-monaco-editor/lib/index.js:8:15)
    at Module._compile (module.js:652:30)

+16

IrfanBaqui on Jun 18, 2018

@mattpardee I tried to use https://github.com/resourcesco/snippets/blob/master/docs/monaco-editor-with-next.md steps but it was not working well.

Here’s my experiment (pretty early though) with NextJs and Monaco https://morphism-playground.now.sh/ (A playground for https://github.com/nobrainr/morphism)

Here’s the code source: https://github.com/nobrainr/morphism-playground

Monaco Webpack Plugin: https://github.com/nobrainr/morphism-playground/blob/8ec477594d41e71e2640e87f8f522f84dfb3b28a/next.config.js#L7
Statically serve Monaco files with Express: https://github.com/nobrainr/morphism-playground/blob/20d38482594c7a006001df88d4309776601337b0/server/index.ts#L19
Wrapping React Monaco Editor in my Own component: https://github.com/nobrainr/morphism-playground/blob/8ec477594d41e71e2640e87f8f522f84dfb3b28a/src/components/Playground.tsx#L5

Hope it helps, let me know!

emyann on Nov 8, 2018

I’m using @monaco-editor/react package and I followed the suggestion above comment by @sanusart . Thanks

This works for me:

    "transformIgnorePatterns": [
      "/node_modules/(?!(monaco-editor)).+\\.js$"
    ],
    "moduleNameMapper": {
      "^monaco-editor$": "<rootDir>/node_modules/@monaco-editor/react"
    }

vishalsatam on Jan 17, 2023

I ran into the same issue too. 😦

lavenleo on Jun 28, 2018

I ran into the same issue. 😦

picodoth on Jun 27, 2018