Panning breaks after first interaction in mobile devices, using Next.js framework

[pedrommarquesm]

I am using the library "react-simple-maps", which makes use of "d3-zoom".

I opened this issue in their github: [https://github.com/zcreativelabs/react-simple-maps/issues/244]

After some digging, I found out this actually only happens using Next.js framework (a known server-side rendering framework that uses React.js)

First I thought the problem would be rendering the DOM in the server, but even after static rendering my page, this won't work.

This also happens with a normal "create-react-app" inside a CodeSandbox (maybe it's related with code sandbox rendering itself on the server? don't know)

[mbostock]

Please use Stack Overflow tag d3.js to ask for help. Stack Overflow provides a better collaborative forum: thousands of D3-related questions have been asked there, and some answers may be relevant to you.

When asking for help, please include a link to demonstrate the issue, preferably as an Observable notebook. It is often impossible to debug from code snippets alone. Isolate the issue and reduce your code as much as possible before asking for help. The less code you post, the easier it is for someone to debug, and the more likely you are to get a helpful response.

If you have a question about D3’s behavior and want to discuss it with other users, also consider the d3-js Google Group or joining the d3-js Slack.

Thank you! 🤗

[pedrommarquesm]

I published this issue before having a CodeSandbox ready, I'm very sorry!

I found out the problem is solved by upgrading react@16.3.1 to @17.0.1.

So the problem is clearly with react-simples-maps (or even some race condition).

After debugging react-simple-maps itself, I tried debugging d3-zoom by first trying to replicate my issue, which ended finding no problem at all.

Once again, very sorry by rushing this issue.

Thanks you!