Rails7 esbuild引入ApexCharts报ApexCharts is not defined错误

Esbuild 按照ES模块规范打包时，模块内部通过import导入的变量默认仅在当前模块作用域内生效，不会自动挂载到全局window对象。你碰到的Uncaught ReferenceError: ApexCharts is not defined报错，本质是执行图表初始化逻辑的作用域里，拿不到你导入的ApexCharts变量，通常是两种情况导致的：

• 图表初始化代码写在了页面的内联<script>标签里，和application.js的模块作用域完全隔离，内联脚本运行在全局作用域，自然读不到模块内的局部变量
• 即使初始化代码写在application.js内部，Turbo页面切换、脚本执行顺序的边缘场景下，也可能出现作用域访问异常，把需要跨作用域调用的类手动挂载到window是最稳妥的处理方式。

CDN引入的脚本默认会把ApexCharts直接挂到全局window上，所有作用域都能访问到，自然不会报错。

1. 修正导入语句，手动暴露全局变量 #

修改app/javascript/application.js里的ApexCharts导入逻辑，把变量挂载到window对象：

import ApexCharts from 'apexcharts'
// 手动挂到全局
window.ApexCharts = ApexCharts

2. 优化图表初始化逻辑，兼容Turbo生命周期 #

把图表初始化代码统一放在application.js中管理，不要写在页面内联脚本里，同时补上Turbo缓存场景的销毁逻辑，避免重复渲染、内存泄漏问题：

document.addEventListener('turbo:load', function(){
  const chartContainer = document.querySelector('.user-apex-chart')
  // 页面没有对应图表容器时直接跳过，避免空报错
  if (!chartContainer) return

  // 如果容器上已经有图表实例，先销毁再重新渲染
  if (chartContainer.chartInstance) {
    chartContainer.chartInstance.destroy()
  }

  const options = {
    chart: {
      type: 'line'
    },
    series: [{
      name: 'sales',
      data: [30,40,35,50,49,60,70,91,125]
    }],
    xaxis: {
      categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
    }
  }

  const chart = new ApexCharts(chartContainer, options)
  chart.render()
  // 把实例存到DOM属性上，方便后续销毁
  chartContainer.chartInstance = chart
})

// 页面被Turbo缓存前销毁图表实例，避免内存泄漏和重复渲染
document.addEventListener('turbo:before-cache', function() {
  const chartContainer = document.querySelector('.user-apex-chart')
  if (chartContainer?.chartInstance) {
    chartContainer.chartInstance.destroy()
  }
})

3. 确认esbuild打包配置正常 #

检查package.json中的构建脚本，确保入口配置正确，标准Rails 7 + esbuild的构建脚本参考如下：

"scripts": {
  "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets"
}

修改完代码后重启bin/dev开发进程，或者手动执行npm run build确保最新代码被正确打包即可。

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