We are trying to use the Azure Maps Animations NPM package in a React app but are unable to import it.
We tried the following code:
import {animations} from "azure-maps-animations";
// layerLine previously defined and works fine
var animation = animations.flowingDashedLine(layerLine, { dashLength: 4, gapLength: 4, autoPlay: false, loop: true, reverse: false });
The layerLine works fine, but the issue comes when we try to use the animation package. Doing so results in the following error message:
ERROR in ./src/MapController.tsx 254:24-52
export 'animations' (imported as 'animations') was not found in 'azure-maps-animations' (possible exports: atlas)
We also tried
import atlas from "azure-maps-animations";
var animation = atlas.animations.flowingDashedLine(layerLine, { dashLength: 4, gapLength: 4, autoPlay: false, loop: true, reverse: false });
However, that resulted in the following error message:
Uncaught runtime errors:
×
ERROR
atlas is not defined ReferenceError: atlas is not defined at ./node_modules/azure-maps-animations/dist/azure-maps-animations.min.js (http://localhost:3000/static/js/bundle.js:4744:34) at options.factory (http://localhost:3000/static/js/bundle.js:128458:31) at __webpack_require__ (http://localhost:3000/static/js/bundle.js:127903:33) at fn (http://localhost:3000/static/js/bundle.js:128115:21) at ./src/MapController.tsx (http://localhost:3000/static/js/bundle.js:150:79) at options.factory (http://localhost:3000/static/js/bundle.js:128458:31) at __webpack_require__ (http://localhost:3000/static/js/bundle.js:127903:33) at fn (http://localhost:3000/static/js/bundle.js:128115:21) at ./src/MapWrapper.tsx (http://localhost:3000/static/js/bundle.js:572:76) at options.factory (http://localhost:3000/static/js/bundle.js:128458:31)
Unfortunately, there doesn't seem to be a lot of information on the specific error message we were getting. The closest we've been able to find is this Q&A for Angular (not for React), and trying the solution suggested there didn't help. We also read this Q&A, but that just ended up being a typo (which doesn't seem to be the case for us).
Has anyone seen this error before? What could be causing this?
Never knew that NPM package existed. It looks like someone forked the original project 3 years ago and hasn't updated the NPM package. There has been several updates since. There isn't an NPM package for the original project at this time. There was plans in the past for Azure Maps to make the dozen or so open modules they have as NPM packages, but not sure if that's still the case. So you would need to load the JS file from the src folder.
I'm assuming you are using TypeScript. The project does include typescript definitions that you can reference. Here is some details on how to do this: https://wanago.io/2021/04/12/react-components-in-javascript-typescript-code/