如何在CodeSandbox中引入chart.js解决require与import报错问题

已定位的报错根因 #

• Cannot find name 'require' 报错：当前使用的CodeSandbox React TypeScript模板默认基于ES Module规范构建，未内置Node.js CommonJS环境的require类型声明，编辑器识别不到该全局变量
• Chart is not a constructor 报错：CodeSandbox默认拉取的Chart.js为v3+最新版本，该版本调整了模块导出结构，不再通过CommonJS入口或ES模块默认导出挂载Chart构造函数，旧的导入写法拿到的是空对象，自然无法实例化
• 替换为import Chart from 'chart.js'仍然运行失败：本质还是和v3+版本的导出结构不匹配，默认导出没有暴露可直接实例化的构造器，和语法本身无关

可直接落地的修复步骤 #

• 替换为匹配v3+规范的正确导入逻辑
  放弃旧版文档中全量默认导入、CommonJS导入的写法，采用按需注册的导入方式，这是v3+版本官方推荐的接入逻辑：

  // 引入核心构造器与所有可注册的图表组件
  import { Chart, registerables } from 'chart.js';
  // 全局注册需要的图表类型、比例尺、交互插件
  Chart.register(...registerables);
  

  该写法可以保证拿到的Chart是可直接实例化的构造函数，从根源解决Chart is not a constructor的报错。
• 从配置层消除require类型报错
  不推荐强行在代码里加declare const require: any的绕过写法，直接调整项目TS配置：
  • 在项目根目录的tsconfig.json中开启esModuleInterop、allowSyntheticDefaultImports配置，CodeSandbox内置TS环境会自动识别配置项，编辑器不再弹出Cannot find name 'require'的类型提示，同时兼容ES模块与CommonJS模块的交叉导入
  • 前端TS项目建议全面替换掉残留的require写法为标准ES Module导入，从根源上避免这类兼容性问题
• 修正实例化逻辑的细节坑
  对应写在plot()方法里的实例化代码，需要避开两个常见运行时坑：
  • 确保this.chartRef.current已经挂载为实际DOM上的<canvas>元素，无空值的情况下再调用new Chart()，避免CodeSandbox热更新流程下DOM未渲染完成导致的空引用报错
  • 重复初始化图表前，先调用旧Chart实例的destroy()方法销毁，避免同一块画布上多实例冲突导致的渲染异常

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