javascriptreactjsnext.jsbuild-errorplotly.js

Next.js yarn build failed due to plotly.js (Build error occurred ReferenceError: self is not defined)

I am getting the following error when I try to build the Next.js app for production using yarn build command. But it is working fine in the development server (when using yarn dev command). I am using react-plotly.js library for generating plot graphs in this react app.

Use of react-plotly lib:

import Plot from 'react-plotly.js';

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

Here is the error:

> Build error occurred
ReferenceError: self is not defined

enter image description here

I have researched the issues on plotly.js git repository and google similar problem but seems with no result. Any ideas why Next.js yarn build failed?

Solution

  • Next Js uses server side rendering, due to this a number of libs reliant on native objects (commonly the window object) wont work as expected.

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

    It seems plotly does not work with ssr but there is another component that should https://github.com/aulneau/next.js-with-react-plotly.js