Parse Error: Unexpected token

[hirasso]

Hi there, just wanted to give animateplus a try, but I keep getting this error when importing it into my app.js:

.../node_modules/animateplus/animateplus.js:217
    ...rest
    ^
ParseError: Unexpected token

When using the spread operator directly in my main app.js, it works fine (using Babel)

[bendc]

Hi! Closing as this is related to your Babel/Webpack config, not this library.

FYI, this is not a spread operator but object rest properties.

[evanfrawley]

I was getting this same issue too. Here are the steps that I used to get this library to work with react-scripts / webpack / babel. Note: this should similarly work for any other webpack configuration as long as you use babel-loader.

1. yarn eject -- Unfortunately, to add a babel loader to the webpack config, I had to eject the react-scripts support from my project. Though a bit cumbersome, you get much more control over how your project is compiled.
2. yarn add --dev babel-plugin-transform-object-rest-spread so that you can get the babel plugin that will fix the Unexpected Token error that is being encountered.
   This will change your devDependencies in the package.json file to look something like:

  "devDependencies": {
    ...
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    ...
  },

3. Lastly, in the webpack.config.dev.js and webpack.config.prod.js, I changed two things. First, I added the babel-loader entry to include the animateplus node module and I added the plugin that we added above. My babel-loader entry now looks like:

webpack.config.dev.js

    ...
          // Process JS with Babel.
          {
            test: /\.(js|jsx|mjs)$/,
            include: [paths.appSrc, `${paths.appNodeModules}/animateplus`],
            loader: require.resolve('babel-loader'),
            options: {
              
              // This is a feature of `babel-loader` for webpack (not Babel itself).
              // It enables caching results in ./node_modules/.cache/babel-loader/
              // directory for faster rebuilds.
              cacheDirectory: true,
              plugins: ["transform-object-rest-spread"],
            },
          },
    ...

webpack.config.prod.js

    ...
          // Process JS with Babel.
          {
            test: /\.(js|jsx|mjs)$/,
            include: [paths.appSrc, `${paths.appNodeModules}/animateplus`],
            loader: require.resolve('babel-loader'),
            options: {
                plugins: ["transform-object-rest-spread"],
                compact: true,
            },
          },
    ...

Other notes:
Here are the other babel deps that may or may not be necessary:

"dependencies": {
    ...
    "babel-core": "6.26.0",
    "babel-eslint": "7.2.3",
    "babel-jest": "20.0.3",
    "babel-loader": "7.1.2",
    "babel-preset-react-app": "^3.1.1",
    "babel-runtime": "6.26.0",
   ...
}