升级react-plotly.js至最新版出现createPlotlyComponent不是函数错误

问题原因 #

最新版react-plotly.js的UMD构建包调整了导出结构：旧版1.0.2直接在全局暴露createPlotlyComponent函数，而新版本将该函数作为默认导出，挂载到了createPlotlyComponent.default属性下，导致原调用方式识别不到函数。

两种修复方法 #

方法一：直接修改现有调用代码 #

无需调整HTML的script引入，只需要把你的JS代码修改为：

const Plot = createPlotlyComponent.default(Plotly);

后续的组件渲染逻辑保持不变即可。

方法二：改用ES模块引入（更标准的方式） #

如果你的运行环境支持ES模块（比如CodePen可以切换设置）：

1. 在CodePen的JS设置面板中，将JavaScript预处理器切换为ES6 Modules
2. 替换HTML中的script标签为：

<script type="module">
  import createPlotlyComponent from 'https://unpkg.com/react-plotly.js@latest/dist/create-plotly-component.esm.js';
  const Plot = createPlotlyComponent(Plotly);
  // 这里继续写你的组件渲染代码
</script>

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