Recently, I had integrated React Spring within an Application, and while it is one of the best Animation Libraries for React I have come across in quite some time; unfortunately, I encountered some issues when running tests and production builds.
Essentially, the issues I experienced were related to the imported modules being written in ES6. This was an issue for me as I prefer to have webpack babel-loader configured to exclude node_modules and only transpile project sources.
Fortunately, the work around for this is quite simple: just import the CommonJS modules (i.e. .cjs extensions) rather than their ES6 counterparts (i.e. no extension).
Thus, simply changing:
1 2 3 | import {Trail, animated} from 'react-spring/renderprops'; |
To:
1 2 3 4 | // ES5 import (note .cjs extension) . import {Trail, animated} from 'react-spring/renderprops.cjs'; |
Resolves the issue.
And so, should you happen to come across build issues when using React Spring, a nice alternative to including the node_modules directory or specific dependencies is to simply import the CommonJS modules.
babel, es6, react, react-spring, webpack
{Sorry, Comments are currently Closed! }