Next.js 纱线构建因 plotly.js 失败（发生构建错误 ReferenceError: self is not defined）

Posted 2023-04-01

【中文标题】Next.js 纱线构建因 plotly.js 失败（发生构建错误 ReferenceError: self is not defined）

【英文标题】：Next.js yarn build failed due to plotly.js (Build error occurred ReferenceError: self is not defined)

【发布时间】：2021-12-02 02:35:33

【问题描述】：

当我尝试使用 yarn build 命令构建用于生产的 Next.js 应用程序时出现以下错误。但它在开发服务器中运行良好（使用yarn dev 命令时）。我正在使用 react-plotly.js 库在此反应应用程序中生成绘图图。

react-plotly 库的使用：

import Plot from 'react-plotly.js';

return(
  <>
   <Plot data=[data] layout=layout />
  </>
)

这是错误：

> Build error occurred
ReferenceError: self is not defined

我已经研究了 plotly.js git 存储库和谷歌类似的问题，但似乎没有结果。知道 Next.js 纱线构建失败的原因吗？

【参考方案1】：

Next Js 使用服务器端渲染，并且在本地开发时仍然模拟 s-s-r，因此许多依赖于原生对象（通常是窗口对象）的库无法按预期工作。

https://github.com/plotly/react-plotly.js/issues/40

似乎 plotly 不适用于 s-s-r 但还有另一个组件应该 https://github.com/aulneau/next.js-with-react-plotly.js

【讨论】：

感谢您的解决方案。没有 s-s-r 的动态导入对我有用。你节省了我的时间。