Chart.js 未捕获类型错误：无法解析模块说明符“@kurkle/color”

Question

我在 laravel 项目中使用 Chart.js 4.2 和 bootstrap 5.1 图表可以工作，但控制台上有一个错误让我发疯：

Uncaught TypeError: Failed to resolve module specifier "@kurkle/color". Relative references must start with either "/", "./", or "../".

我没有使用 npm 安装图表，只是使用 cdn 引用。请注意，cdn 脚本标记没有 type 属性，因此它返回另一个错误：

uncaught SyntaxError: Cannot use import statement outside a module (at chart.min.js:1:1)

要解决此问题，您必须添加 type="module"

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.min.js" integrity="sha512-v3ygConQmvH0QehvQa6gSvTE2VdBZ6wkLOlmK7Mcy2mZ0ZF9saNbbk19QeaoTHdWIEiTlWmrwAL4hS8ElnGFbA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

我缺少什么？

Answer 1

我在我正在从事的 Blazor WASM 项目中遇到了这个问题。

我的解决方法是使用 UMD Bunlde。（Chart.js 存储库上有一个 pr讨论了类似的问题）

我认为更新您的脚本标签以使用 UMD 包可以解决您的问题。

<script type="module" src="https://unpkg.com/chart.js@4.2.1/dist/chart.umd.js" integrity="sha512-v3ygConQmvH0QehvQa6gSvTE2VdBZ6wkLOlmK7Mcy2mZ0ZF9saNbbk19QeaoTHdWIEiTlWmrwAL4hS8ElnGFbA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>