trouble with webpack

[ghan]

I'm using webpack (with babel-loader), and get this error when I import react-geocoder:

ERROR in ./~/react-geocoder/index.js
Module parse failed: /Users/me/project/node_modules/react-geocoder/index.js Line 9:
Unexpected token (
You may need an appropriate loader to handle this file type.
|  */
| var Geocoder = React.createClass({
|   getDefaultProps() {
|     return {
|       endpoint: 'https://api.tiles.mapbox.com',
@ ./static/app/scripts/components/ListProperty/ListPropertyLocationField.jsx 25:21-46

This is most likely a webpack config problem, but I'm hoping someone here knows how to help. My webpack config:

var config = {
    entry: './static/app/scripts/main.js',
    output: {
      path: __dirname,
      filename: 'main.js'
    },
    debug : isDev,
    module: {
      loaders: [{
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: 'babel'
      }]
    }
  };

[tmcw]

We should probably pre-process the dist file with babel so a transform isn't necessary to use this as a module.

[ComboStyle]

its because your test is 'jsx' but there are some modules (like this one) that uses JSX inside a file with .js extension [index.js is actually using jsx]

I added 'index.js' as a test (in addition to 'jsx') because there are some modules who do that

[joewood]

Hitting an issue with webpack too. My config is loading the loader correctly:

{ 
    test: /node_modules[\/\\]react-geocoder[\/\\].*\.js/, 
    loader: 'babel', 
    query: {presets:['react','es2015']}
}

But there's still something funky with the output. Getting a runtime error:

warning: Geocoder(...): React component classes must extend React.Component.

Updating the package dist so that it uses regular JS would be useful.

[joewood]

Just as an FYI - my issue was related to the react 0.13 dependency. Upgrading react-geocoder manually to react ^0.14 solved the issue.