Comments (2)
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
.
yarn eject
-- Unfortunately, to add a babel loader to the webpack config, I had to eject thereact-scripts
support from my project. Though a bit cumbersome, you get much more control over how your project is compiled.yarn add --dev babel-plugin-transform-object-rest-spread
so that you can get the babel plugin that will fix theUnexpected Token
error that is being encountered.
This will change yourdevDependencies
in thepackage.json
file to look something like:
"devDependencies": {
...
"babel-plugin-transform-object-rest-spread": "^6.26.0",
...
},
- Lastly, in the
webpack.config.dev.js
andwebpack.config.prod.js
, I changed two things. First, I added thebabel-loader
entry to include theanimateplus
node module and I added the plugin that we added above. Mybabel-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",
...
}
from animateplus.
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.
from animateplus.
Related Issues (20)
- README: easing functions duplicated
- fyI: is not working HOT 2
- common.js module not work HOT 1
- Uncaught TypeError: Cannot read property 'forEach' of undefined HOT 2
- Examples not working HOT 1
- async/await not supported by preact-cli HOT 3
- Cannot call function as a class HOT 3
- Example Repo HOT 3
- Animations do not work on mobile safari HOT 1
- Blur issues HOT 1
- is this also suited for 3d transform animations? HOT 1
- use pseudo-elements HOT 1
- Translate3d Support HOT 3
- Getting started example not working properly on chrome HOT 3
- Unexpected token export HOT 1
- Issue with IE/Edge HOT 3
- Comparison with other modules? HOT 1
- Animate SVG path d attribute HOT 5
- Cannot call JS method at the end of animation HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from animateplus.