require('codemirror') loads react-codemirror component

I’ve tried to embed react-codemirror into the app as described in the example, but faced strange issue. I got an error TypeError: CM.fromTextArea is not a function.

After some investigation, I found that react-codemirror loads itself here https://github.com/JedWatson/react-codemirror/blob/master/lib/Codemirror.js#L6

CM contains CodeMirror react component.

I’m bundling project with webpack and babel. Result bundle contains 2 equal module IDs 648 and 649, and 649 depends on 648, react-codemirror both.

Here is a sample of webpack config:

module.exports = {
  context: join(__dirname, '/src'),

  entry: {
    app: [
      'babel-polyfill',
      './scripts/master',
      './index.html'
    ]
  },

  output: {
    path: join(__dirname, '/dist'),
    filename: '[name].js'
  },

  debug: true,

  devtool: null,

  module: {
    loaders: [
      {
        test: /(\.js|\.jsx)$/,
        include: [
          join(__dirname, 'src'),
          join(__dirname, 'node_modules/react-codemirror')
        ],
        loader: 'babel'
      },
      {
        test: /(\.scss|\.css)$/,
        loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&' +
          'localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap!toolbox')
      },
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx', '.json', '.scss', '.css'],
    modulesDirectories: [
      'node_modules',
      'src/scripts',
      'src'
    ]
  },

};

[zenoamaro]

@balkonsmoke, @joshbuckley182, the issue is caused by these lines in your webpack configurations:

modulesDirectories: [
  'node_modules',
  'src/scripts',
  'src'
]

This causes react-codemirror to look for codemirror in its own src directory before looking in node_modules. I would suggest changing that to something like:

modulesDirectories: [
  'node_modules',
  path.resolve(__dirname, 'src/scripts'),
  path.resolve(__dirname, 'src')
]

[scniro]

If this issue still persists please give react-codemirror2 a look. I’m planning on maintaining this moving forward. Better docs will be coming. Feel free to open up any issues/suggestions as I’ll be trying to gather as much constructive feedback from the community moving forward