2

To use Plotly.js with React.js you must use a wrapper like react-plotly.js. Plotly.js package has an unpacked size of 79.8 MB according to its official npm page. In my project, I don't need to use all of the package.

In the official GitHub repository is possible to find many bundle files, each containing a specific kind of plot available in Ploty.js. My example of usage in a simple React.

When I use the same approach in my project, that uses Next.js and Typescript, I got this error:

Server Error
ReferenceError: self is not defined
This error happened while generating the page. Any console logs will be displayed in the terminal window.

That is any way to use those bundles/distributed files with Next.js?

Alexandre Aragão
  • 413
  • 3
  • 17
  • The size shown on NPM page is not it's bundle size. Its just the size of tarball that NPM will download while installing that package. [The bundle size of plotly.js is 1MB (min+gz).](https://bundlephobia.com/package/plotly.js@2.3.1) Also, Next.js will do code splitting if your library supports it. So you don't need to worry about having a very heavy site. It will try to keep only the things that you've used. First try implementing the code directly in Next.js then use [webpack-bundle-analyzer](https://github.com/vercel/next.js/tree/canary/packages/next-bundle-analyzer). – brc-dd Aug 16 '21 at 04:20
  • Also, the example you've shown isn't working for you, because Next.js renders the application on server during build. The import in the example is creating some kind of global variables, and probably using browser features while doing so. That's why you are getting the error. – brc-dd Aug 16 '21 at 04:24
  • 1
    Regarding the `ReferenceError: self is not defined` error, does this help solve your issue: [(Webpack) Why am I getting ReferenceError: self is not defined in Next.js when I try to import a client-side library?](https://stackoverflow.com/a/66100185/1870780)? You need to import the library on the client-side only. – juliomalves Aug 16 '21 at 14:33

0 Answers0