require('codemirror') loads react-codemirror component

[ghost]

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'
    ]
  },

};

[joshbuckley182]

@balkonsmoke: Did you find a solution to this? I'm having a related issue.

---

When running my project (through webpack), I'm getting this in my terminal:

[0] ./~/react-codemirror/src/codemirror.js
[0] Module parse failed: /Users/josh/dev/my-project/node_modules/react-codemirror/src/codemirror.js Unexpected token (76:3)
...stack trace...
[0]  @ ./~/react-codemirror/lib/Codemirror.js 20:42-63

lib/Codemirror.js is trying to load codemirrror (at https://github.com/JedWatson/react-codemirror/blob/master/lib/Codemirror.js#L20), but is ending up with src/Codemirror.js. Perhaps because I'm on a case-insensitive filesystem (OS X Extended), and require is loading src/Codemirror.js over the npm package codemirror?

As a temporary solution, I'm removing src/Codemirror.js, which allows the correct package to be loaded.

[joshbuckley182]

@kelchm That pull request would remove the original source code!

@JedWatson Perhaps adding the src dir to .npmignore and republishing would help?

[kelchm]

@joshbuckley182 That wasn't intended to ever be a pull request. Just a quick hack for my personal use, didn't realize mentioning the issue number would cause it to show up here. I think your solution is the correct one.

[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')
]

[avinashdaiict]

I am having a similar issue can we have this resolved by adding src to npmignore

[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