Use react-magic-move with webpack

[hugooliveirad]

Hi! I want to use react-magic-move in my app. The catch is that I'm compiling everything with webpack and using the exclude option to prevent compiling every dependency.

My webpack.config.js looks like this:

module: {
    loaders: [
      { test: /\.js$/, loaders: ['react-hot', 'babel?experimental'], exclude: /node_modules/ }
    ]
}

When I try to build a file with require('react-magic-move') I get this error:

ERROR in ./~/react-magic-move/modules/components/MagicMove.js
Module parse failed: /Users/hugo.bessa/Sites/copag-cartas/node_modules/react-magic-move/modules/components/MagicMove.js Line 8: Unexpected token (
You may need an appropriate loader to handle this file type.
|   displayName: 'MagicMoveClones',
|
|   childrenWithPositions () {
|     var children = [];
|     React.Children.forEach(this.props.children, (child) => {
 @ ./~/react-magic-move/modules/index.js 1:17-50

As I'm excluding my dependencies from the build step, and react-magic-move is exporting an ES6 module, the build step is failing.

Can react-magic-move export an ES5 CommonJS bundle or should I change my webpack configs?

[beeant]

Correct me if I'm wrong,

You need to add loader for jsx-loader?harmony transformer For me, I have something like this: (I'm using react-jade for my React components in public folder)

loaders: [
  { test: /\.js$/, exclude: /node_modules/, loader: "transform?react-jade" },
  { test: /\.js$/, exclude: /public/, loader: 'jsx-loader?harmony' },
]

don't forget to npm install jsx-loader

[hugooliveirad]

Hey @beeant I missed your comment. Thanks for the help, I'll see if this fixes my issue.