尝试在 React 应用程序中使用“azure-maps-animations”NPM 包时出现“未找到导出”错误消息

Question

我们正在尝试在 React 应用程序中使用 Azure Maps Animations NPM 包，但无法导入它。

我们尝试了以下代码：

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 });

layerLine

工作正常，但是当我们尝试使用动画包时就会出现问题。这样做会导致以下错误消息：

ERROR in ./src/MapController.tsx 254:24-52

export 'animations' (imported as 'animations') was not found in 'azure-maps-animations' (possible exports: atlas)

我们也尝试过

import atlas from "azure-maps-animations";

var animation = atlas.animations.flowingDashedLine(layerLine, { dashLength: 4, gapLength: 4, autoPlay: false, loop: true, reverse: false });

但是，这导致了以下错误消息：

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)

不幸的是，关于我们收到的具体错误消息似乎没有很多信息。我们能找到的最接近的是针对 Angular（不适用于 React）的this Q&A，尝试那里建议的解决方案并没有帮助。我们还阅读了此问答，但这最终只是一个拼写错误（对我们来说似乎并非如此）。

有人见过这个错误吗？这可能是什么原因造成的？

Answer 1

从来不知道 NPM 包的存在。看起来有人在 3 年前分叉了原始项目并且还没有更新 NPM 包。此后已有多次更新。目前原始项目还没有 NPM 包。 Azure Maps 过去曾计划将其拥有的十几个开放模块作为 NPM 包，但不确定是否仍然如此。所以你需要从 src 文件夹加载 JS 文件。

我假设您正在使用 TypeScript。该项目确实包含您可以参考的打字稿定义。以下是有关如何执行此操作的一些详细信息：https://wanago.io/2021/04/12/react-components-in-javascript-typescript-code/

Answer 2

将库安装为 NPM 包。在您的组件中：

import * as animationAtlas from 'azure-maps-animations'


ngOnInit(): void {

// The animation atlas is one level below. Workaround for that:
  let dummyAtlas = animationAtlas as any;

 const atlasAnimationsWrapper: {
   atlas: typeof animationAtlas
    } = {
        atlas: dummyAtlas.atlas,
    }

// Example of how to use types inside of it
  atlasAnimationsWrapper.atlas.animations.setTimeout(() => console.warn('HELLO FROM ATLAS.ANIMATIONS'), 5)
}

这是我的快速而肮脏的解决方案。我将创建自己的 NPM 并尝试稍后找到更好的解决方法。如果出现问题，将对此答案发表评论。