在Rails 7中使用ImportMap集成Chart.js遇到的问题

问题重现 #

• 执行命令pin Chart.js：

  ./bin/importmap pin chart.js
  

• 自动生成的config/importmap.rb内容：

  pin "chart.js", to: "https://ga.jspm.io/npm:chart.js@3.9.1/dist/chart.mjs"
  

• 在application.js中尝试导入时遇到的问题：
  1. 用import 'chart.js'，创建Chart实例时报错**"Chart is not defined"**
  2. 用import Chart from 'chart.js'，报错**"The requested module 'chart.js' does not provide an export named 'default'"**
  3. 用import Chart from 'chart.js/auto'，报错**"Failed to resolve module specifier 'chart.js/auto'"**

解决方案 #

步骤1：补充pin Chart.js的auto模块

Chart.js 3.x版本需要通过chart.js/auto来自动注册所有图表控制器，默认的pin操作只添加了主模块路径，需补充该子路径的映射：

执行以下命令：

./bin/importmap pin chart.js/auto

执行后config/importmap.rb会新增一条规则：

pin "chart.js/auto", to: "https://ga.jspm.io/npm:chart.js@3.9.1/dist/auto/auto.mjs"

也可以手动在config/importmap.rb中添加上述内容，注意保持和已有chart.js条目版本一致。

步骤2：正确导入并使用Chart

在application.js中选择以下任一方式导入：

// 方式1：自动注册全局Chart对象
import 'chart.js/auto'

// 直接创建实例
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, { /* 图表配置项 */ });

或者更符合ES模块规范的解构导入：

// 方式2：按需导入Chart类
import { Chart } from 'chart.js/auto'

// 创建实例
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, { /* 图表配置项 */ });

原因说明 #

Chart.js 3.x改用ES模块结构后：

• 主模块chart.js仅导出核心类和方法，不会自动注册全局Chart对象，也无默认导出
• chart.js/auto模块会自动注册所有内置图表控制器，同时支持全局调用或解构导入Chart类
• 最初的pin操作未覆盖/auto子路径，导致模块解析失败

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