This issue was a real pain in the a** to debug...
Let's look at this code, from renderImage:
if (state === "update") {
this.panorama.destroy();
}
this.panorama = pannellum.viewer(
this.props.id ? this.props.id : this.state.id,
jsonConfig
);What it says is that it only destroys the old viewer if we're in an update, essentially assuming that we'll only ever mount once.
Well, the thing about React.StrictMode is that it invokes component mounting twice! Since the VIewer constructor adds the pnlm-render-container by finding the pannellum element by ID and appending elements to it, it means that both pnlm-render-container + all hotspots will be added twice. The duplicate hotspots will be overlaid to the screen and never update their positions. Great.
Instead of even bothering with the whole "state" thing, why not just delete it only if the old viewer is not undefined?
This issue was a real pain in the a** to debug...
Let's look at this code, from renderImage:
What it says is that it only destroys the old viewer if we're in an update, essentially assuming that we'll only ever mount once.
Well, the thing about React.StrictMode is that it invokes component mounting twice! Since the VIewer constructor adds the pnlm-render-container by finding the pannellum element by ID and appending elements to it, it means that both pnlm-render-container + all hotspots will be added twice. The duplicate hotspots will be overlaid to the screen and never update their positions. Great.
Instead of even bothering with the whole "state" thing, why not just delete it only if the old viewer is not undefined?