Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
window is not defined, when using @nivo/pie in Next.JS
See original GitHub issueDescribe/explain the bug
It doesn’t seem like the pie chart @nivo/pie supports server side rendering. Others however such as line do.
To Reproduce
- Create a new next app
yarn create next-app - Add pie charts
yarn add @nivo/pie - Go inside
pagesand edit theindex.jsto importPieand try using it with<Pie/>
Expected behavior The Pie chart renders server side and all is good.
Screenshots
Desktop (please complete the following information):
- OS: Windows
- Browser: Edge
- Version:
@nivo/pie: ^0.64.0
Thank you!
Issue Analytics
- State:
- Created 3 years ago
- Reactions:3
- Comments:5 (2 by maintainers)
Top Results From Across the Web
ReferenceError: ResizeObserver is not defined with nivo and ...
It looks like @nivo/pie is not compatible with Next.js server-side rendering as it utilizes Web APIs ( ResizeObserver ).
Read more >How to solve Next.js window is not defined
One way is to not use window at all when rendering the page, but that isn't practical. Let's look at some actual solutions...
Read more >How to use nivo charts with Next.js - Learn JSX
In this tutorial, we will show how to use nivo with Next.js to draw charts like pie charts and line charts, also how...
Read more >Tooltip Doesn't Function like Dev on Next.js Build #1397
When I use nivo scatterplot and pie charts and import them into my next.js project, the tooltips render correctly and follow my cursor...
Read more >How to solve "window is not defined" errors in React and Next.js
A different solution is to load your Scroll component using dynamic imports and the srr: false option. This way your component won't even...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@gomorizsolt, I’m gonna try to release tomorrow.
Thanks!