Recharts搭配Rollup打包时ResponsiveContainer报ResizeObserver错误咨询

Rollup构建打包的项目使用Recharts渲染图表时触发运行报错，经排查确认：

• 报错仅在使用ResponsiveContainer组件时触发，移除该组件后所有功能运行正常
• 回退安装Recharts 1.8.5版本后相关功能可正常运行，期望适配Recharts 2.x版本
• 检索到的通用方案多建议引入polyfill修复，但项目未使用非常规特殊逻辑，无引入polyfill的必要，需要明确问题排查方向

报错信息 #

TypeError: Failed to construct 'ResizeObserver': 
Please use the 'new' operator, this DOM object constructor cannot be called as a function.

复现代码 #

React 组件代码 #

<div style={{ width: '300px', height: '300px', userSelect: 'none' }}>
  <ResponsiveContainer width={700} height="80%">
    <AreaChart
      width={500}
      height={300}
      data={data}
      margin={PLOT_MARGIN}>
      // 其余图表配置
    </AreaChart>
  </ResponsiveContainer>
</div>

Rollup UMD 构建配置 #

{
  input,
  output: {
    file: packageJSON.browser,
    format: 'umd',
    sourcemap: true,
    name: 'my-package-name',
    globals: {
      react: 'React',
    },
  },
  plugins: [
    babel({
      exclude: 'node_modules/**',
    }),
    external(),
    nodeResolve({ extensions: ['.mjs', '.js', '.jsx', '.json', '.node'] }),
    commonjs(),
  ],
}

该问题和polyfill引入没有任何关系，是Rollup的CommonJS模块转换插件处理Recharts 2.x内部代码时的转换错误导致的。
Recharts 2.x的ResponsiveContainer组件依赖原生ResizeObserver API实现容器尺寸监听，旧版本@rollup/plugin-commonjs在转换该部分CommonJS格式的依赖代码时，无法正确识别ResizeObserver是浏览器原生构造函数，错误地将new ResizeObserver()构造调用转成了普通函数调用，最终触发了DOM构造器不能作为普通函数调用的运行时错误。Recharts 1.x版本未使用原生ResizeObserver实现相关逻辑，因此不会触发该问题。

按优先级依次尝试即可：

• 先将项目依赖的@rollup/plugin-commonjs升级到最新稳定版，新版本已经修复了原生构造器的识别转换问题，多数场景下升级后即可直接解决问题
• 如果升级插件后报错仍存在，在commonjs插件配置中显式声明ResizeObserver为构造函数，强制插件保留其new调用形式：

commonjs({
  constructors: ['ResizeObserver']
})

• 保持babel配置中exclude: 'node_modules/**'的规则，不要将node_modules下的第三方依赖纳入babel转译范围，避免二次转译引入同类调用错误。

内容的提问来源于stack exchange，提问作者Joe Van Gundy