fix: handle crash case if reuse maps with same element and clean up the element if not reused

Author: lh0x00

package.json

@@ -75,15 +75,16 @@
     "jsdom": "^15.0.0",
     "ocular-dev-tools": "^0.2.2",
     "pre-commit": "^1.2.2",
-    "react": "^16.3.0",
-    "react-dom": "^16.3.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-test-renderer": "^16.3.0",
     "reify": "^0.18.1",
     "sinon": "4.1.3",
     "typescript": "^4.0.0"
   },
   "peerDependencies": {
-    "react": ">=16.3.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "pre-commit": [
     "test-fast"

src/goong/goong.js

@@ -209,13 +209,17 @@ export default class Goong {
     this._map = Goong.savedMap;
     // When reusing the saved map, we need to reparent the map(canvas) and other child nodes
     // intoto the new container from the props.
-    // Step1: reparenting child nodes from old container to new container
+    // Step1: reparenting child nodes from old container to new container, do not execute if same element, otherwise will loop and crash.
     const oldContainer = this._map.getContainer();
     const newContainer = props.container;
     newContainer.classList.add('mapboxgl-map');
-    while (oldContainer.childNodes.length > 0) {
-      newContainer.appendChild(oldContainer.childNodes[0]);
+
+    if (oldContainer !== newContainer) {
+      while (oldContainer.childNodes.length > 0) {
+        newContainer.appendChild(oldContainer.childNodes[0]);
+      }
     }
+
     // Step2: replace the internal container with new container from the react component
     this._map._container = newContainer;
     Goong.savedMap = null;
@@ -285,7 +289,7 @@ export default class Goong {
       return;
     }
 
-    if (!Goong.savedMap) {
+    if (!this.props.reuseMaps && !Goong.savedMap) {
       Goong.savedMap = this._map;
 
       // deregister the goong event listeners