为什么我的MongoDB Chart Embedding SDK无法正常工作？

可直接运行的修复方案 #

1. 修正index.html配置 #

你当前使用ES Module语法编写JS文件，浏览器默认不会识别模块导入，需要给script标签添加type="module"属性，修正后的完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 直接引入CDN版SDK，不需要再在JS里import，适合纯静态页面 -->
    <script src="https://unpkg.com/@mongodb-js/charts-embed-dom@latest/dist/charts-embed-dom.umd.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div>
        <div id="chart1"></div>
        <button id="refresh1">Refresh this chart</button>
        <script type="module" src="chart1.js"></script>
    </div>
    <div>
        <div id="chart2"></div>
        <button id="refresh2">Refresh this chart</button>
        <script type="module" src="chart2.js"></script>
    </div>
</body>
</html>

2. 修正chart1.js代码 #

存在两处错误：配置项weidth拼写错误，刷新事件回调中引用的chart变量未定义，修正后代码如下：

// 已经通过CDN引入全局SDK，删除import语句
const sdk = new ChartsEmbedSDK({
    baseUrl: "https://charts.mongodb.com/charts-project-0-qumgu"
});

const chart1 = sdk.createChart({
    chartId: "1e32b53f-6de2-45d2-863d-025b85c8bec9",
    width: 400,
    height: 650,
});
chart1.render(document.getElementById('chart1'));
document
    .getElementById('refresh1')
    .addEventListener('click', () => chart1.refresh());

3. 调整chart2.js代码 #

删除首行的import语句即可，其余代码无需改动：

const sdk = new ChartsEmbedSDK({
    baseUrl: 'https://charts.mongodb.com/charts-project-0-qumgu',
});
const chart = sdk.createChart({
    chartId: '98a3a7ad-8ddd-4f7e-971e-586157ec9379',
});

// render the chart into a container
chart
    .render(document.getElementById('chart2'))
    .catch(() => window.alert('Chart failed to initialise'));

// refresh the chart whenenver #refreshButton is clicked
document
    .getElementById('refresh2')
    .addEventListener('click', () => chart.refresh());

额外注意事项 #

如果不使用CDN引入，需要通过vite、webpack等前端构建工具运行项目，提前执行npm install @mongodb-js/charts-embed-dom安装依赖，不能直接本地打开html文件运行，否则会触发模块加载和跨域限制。

内容的提问来源于stack exchange，提问作者veipunii