Tooltip Doesn't Function like Dev on Next.js Build

[hariria]

Describe/explain the bug When I use nivo scatterplot and pie charts and import them into my next.js project, the tooltips render correctly and follow my cursor as they should. However, when I build the project, ie. run

npm run build

and host the website, the tooltip doesn't follow my cursor anymore and the experience of using it is very different. Furthermore, I have inputs that change the xScale and yScale attributes of the graph, however, when those inputs change, the graph the x and y axis tickers start to overlap.

To Reproduce Unfortunately this isn't something I can easily show with a codesandbox, however, if you build a next.js project with one of these graphs, this is seems to happen.

Expected behavior Tooltip should follow cursor and there shouldn't be overlapping x and y axis tickers.

Screenshots

https://user-images.githubusercontent.com/31301117/105616390-5dc59800-5d8b-11eb-822c-48900f1194f8.mov

Desktop (please complete the following information):

• OS: Mac
• Browser: Chrome
• Version: Latest

[masch712]

I'm seeing similar tooltip misbehavior from a bare create-react-app project with a ResponsiveLine component. It works fine in dev, but the tooltips don't follow my cursor in the built, "production-optimized" js. I copied my ResponsiveLine code from here: https://nivo.rocks/line/ I tried Chrome, Firefox, and Safari; same misbehavior in all of them.

One potential clue: I'm seeing this error in my browser console when running the optimized build, but not in dev:

TypeError: r.willAdvance is not a function
    at FrameLoop.ts:173
    at Module.vc (react-dom.production.min.js:244)
    at y.advance (FrameLoop.ts:169)
    at n (FrameLoop.ts:107)

UPDATE: This comment has an unintrusive temporary fix. I tested it in my minimal repo, works nicely: https://github.com/pmndrs/react-spring/issues/1078#issuecomment-753032426

[wyze]

Duplicate of #1290.