javascript - 尝试在 React 应用程序中使用 "Export not found"NPM 包时出现 "azure-maps-animations"错误消息

Question

我们正在尝试使用 Azure Maps Animations React 应用程序中的 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)

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

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

Answer 1

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

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