在VueJS应用程序上嵌入MongoDB图表时出现问题

Question

我试图在VueJS应用程序上嵌入MongoDB图表，但第一步就被卡住了。

在完成npm安装后，我尝试导入如下库：

import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom";

这一行包含后，我的VueJS应用程序立即抱怨如下：

./node_modules/@mongodb-js/charts-embed-dom/dist/charts-embed-dom.esm.js
Module parse failed: Unexpected token (556:11)
You may need an appropriate loader to handle this file type.
|   }
| 
|   return { ...sharedEmbedOptions,
|     chartId,
|     filter,

它看起来像ES6休息操作员"图表中使用的嵌入dom模块没有被我的babel加载器识别？我该怎么办？

Answer 1

一种解决方案是将图表嵌入为IFRAME如：

<iframe style="background: #FFFFFF;border: none;border-radius: 2px;box-shadow: 0 2px 10px 0 rgba(70, 76, 79, .2);" width="640" height="480" src="https://charts.mongodb.com/charts-m220-usxbb/embed/charts?id=621dfa65-fe67-407c-8eff-xxxxxxxx&maxDataAge=3600&theme=light&autoRefresh=true"></iframe>

有关示例，请参见以下内容：https://restaurantapp-bfnrh.mongodbstitch.com/

此外，请张贴您的软件包.json，因为它可能有助于调查。一旦包工作正常，您还需要担心图表是否需要身份验证才能查看。