react-animate icon indicating copy to clipboard operation
react-animate copied to clipboard

Module parse failed with webpack/babel compilation

Open andynoelker opened this issue 9 years ago • 4 comments

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?

andynoelker avatar Dec 15 '15 21:12 andynoelker

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

SlowburnAZ avatar Feb 03 '16 06:02 SlowburnAZ

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.

andynoelker avatar Feb 03 '16 17:02 andynoelker

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

elierotenberg avatar Feb 03 '16 17:02 elierotenberg

@andynoelker @elierotenberg

Right on guys, thanks!

SlowburnAZ avatar Feb 05 '16 01:02 SlowburnAZ