elierotenberg / react-animate

React animation mixin.
MIT License
271 stars 14 forks source link

Module parse failed with webpack/babel compilation #14

Open andynoelker opened 8 years ago

andynoelker commented 8 years ago

Hi, I'm trying to add this package to a pre-existing project where I'm using webpack to compile with babel. However this package is breaking on compilation with the following error:

ERROR in ./~/react-animate/src/index.jsx
Module parse failed: /path/to/project/node_modules/react-animate/src/index.jsx Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import raf from 'raf';
| import tween from 'tween-interpolate';
| import _ from 'lodash';

I know that using babel is a requirement for this package, but I am using babel (webpack uses babel-loader). Here is the relevant part of my webpack.config.js:

entry: [
        "babel-polyfill",
        "./js/index.js"
    ],
output: {
    filename: "../project/path/bundle.js"
},
resolve: {
    extensions: ['', '.js', '.jsx'],
},
module: {
    loaders: [
        {
            loader: 'babel-loader',
            test: /\.jsx?$/,
            exclude: /(node_modules|bower_components)/,
            query: {
                   plugins: ['transform-runtime'],
                   presets: ['es2015', 'stage-0', 'react'],
            }
        }
    ]
}

I'm not sure exactly what the problem could be as I have already successfully been using other packages and writing my own ES6/ES7 code with no issues. Any idea if this is a faulty configuration on my end or something that needs to be fixed in the package itself?

SlowburnAZ commented 8 years ago

@andynoelker, I'm having this same error... how did you solve yours?

andynoelker commented 8 years ago

Well I am just not using this package so I never really had to solve it :) However, looking back I do think I know what the issue was - in my webpack config I am excluding the entire node_modules directory which means that this package was never getting transpiled with babel, even though my own code would be. Most React tutorials tend to use this blacklisting approach as it's just much simpler and many packages are not written in ES6/ES7. However, if I instead used include and whitelisted what directories should be transpiled, then I think it would resolve this issue (just a much more tedious thing for my app). I'm not sure if I would have run into more issues after doing that, but I'm pretty sure that was at least responsible for this specific error.

elierotenberg commented 8 years ago

Hello,

Sorry for not answering this earlier. This version of the package doesn't include a transpiled build, which turned out to be a miserable failure. We'll soon merge the last version of https://github.com/elierotenberg/lib-starterkit which should fix this issue (among other things).

@eTorAken

SlowburnAZ commented 8 years ago

@andynoelker @elierotenberg

Right on guys, thanks!