Vite+React部署Apache Echarts时出现'encode'未定义错误求助

问题描述 #

采用Vite + React构建应用并集成Apache ECharts，本地运行及执行npm run build均无报错，但部署后页面抛出以下错误：

Unexpected Application Error!
Cannot read properties of undefined (reading 'encode')
TypeError: Cannot read properties of undefined (reading 'encode')
     at e.mapDimensionsAll (https://desarrollo.d2qwzq..........)
     at x2 (https://desarrollo.d2qwzq..........)
     at or (https://desarrollo.d2qwzq..........)
     at e.<anonymous> (https://desarrollo.d2qwzq..........)
     at t.<anonymous> (https://desarrollo.d2qwzq..........)
     at Array.forEach (<anonymous>)
     at BF (https://desarrollo.d2qwzq..........)
     at t.eachSeries (https://desarrollo.d2qwzq..........)
     at e.Wy (https://desarrollo.d2qwzq..........)
     at e.update (https://desarrollo.d2qwzq..........)

注：代码中未显式使用名为encode的变量。

解决办法 #

1. 检查图表配置完整性 #

• 确保ECharts的option配置中，series数组的每一项都包含必要字段（如type、data），避免出现未定义的系列项。
• 动态生成配置时，禁止出现undefined或null的配置片段，比如接口返回空数据时，给data设置默认空数组而非留空。

2. 规范异步数据加载时序 #

• 若图表数据为异步获取，必须等数据返回并处理完成后再调用setOption更新图表，禁止在组件挂载时直接传入未初始化的空数据或undefined。
• 可在数据加载完成前渲染加载状态，避免ECharts解析无效配置。

3. 调整Vite构建优化配置 #

Vite生产构建的树摇优化可能误删ECharts必要模块，在vite.config.js中添加如下配置：

export default defineConfig({
  optimizeDeps: {
    include: ['echarts', 'echarts-for-react']
  },
  build: {
    commonjsOptions: {
      include: [/echarts/, /echarts-for-react/, /node_modules/]
    }
  }
})

4. 锁定ECharts稳定版本 #

部分ECharts版本与Vite存在兼容性问题，尝试锁定版本后重新安装依赖：

npm install echarts@5.4.3 echarts-for-react@3.0.2 --save

5. 排查环境变量差异 #

检查本地与部署环境的全局变量、环境变量是否一致，避免依赖仅本地存在的变量（如开发环境mock数据未在生产环境替换）。

内容的提问来源于stack exchange，提问作者Ismael Treviño