由於 plotly.js，Next.js 紗線構建失敗（發生構建錯誤 ReferenceError: self is not defined）

Question

當我嘗試使用yarn build命令yarn build用於生產的 Next.js 應用程序時，出現以下錯誤。 但它在開發服務器中運行良好（使用yarn dev命令時）。 我正在使用react-plotly.js庫在這個 react 應用程序中生成繪圖圖。

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 repository 和 google 類似問題上的問題，但似乎沒有結果。 為什么 Next.js 紗線構建失敗的任何想法？

Answer 1

Next Js 使用服務器端渲染並且在本地開發時仍然模擬 ssr，因此許多依賴於本機對象（通常是窗口對象）的庫將無法按預期工作。

似乎 plotly 不適用於 ssr 但還有另一個組件應該https://github.com/aulneau/next.js-with-react-plotly.js