From 54e6a31545ba8c5af4515a95278e30e2f6123c94 Mon Sep 17 00:00:00 2001
From: Edie Lemoine <edie@myparcel.nl>
Date: Thu, 5 Dec 2019 15:08:53 +0100
Subject: [PATCH] fix: don't load scripts if requirejs is present or if they
 are already loaded

---
 .commitlintrc                         |  5 +++-
 package-lock.json                     |  6 ++---
 package.json                          |  2 +-
 src/components/Pickup/Map/Leaflet.vue | 35 ++++++++++++++++++++-------
 4 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/.commitlintrc b/.commitlintrc
index 0df1d253..cca95a2a 100644
--- a/.commitlintrc
+++ b/.commitlintrc
@@ -1,5 +1,8 @@
 {
   "extends": [
     "@commitlint/config-conventional"
-  ]
+  ],
+  "rules": {
+    "header-max-length": [0]
+  }
 }
diff --git a/package-lock.json b/package-lock.json
index 8563766e..c936f6dd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9109,9 +9109,9 @@
       }
     },
     "core-js": {
-      "version": "3.4.5",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.4.5.tgz",
-      "integrity": "sha512-OuvejWH6vIaUo59Ndlh89purNm4DCIy/v3QoYlcGnn+PkYI8BhNHfCuAESrWX+ZPfq9JccVJ+XXgOMy77PJexg=="
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.4.7.tgz",
+      "integrity": "sha512-qaPVGw30J1wQ0GR3GvoPqlGf9GZfKKF4kFC7kiHlcsPTqH3txrs9crCp3ZiMAXuSenhz89Jnl4GZs/67S5VOSg=="
     },
     "core-js-compat": {
       "version": "3.4.4",
diff --git a/package.json b/package.json
index 39a78486..89155733 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
     "@fortawesome/vue-fontawesome": "^0.1.8",
     "@myparcel/js-sdk": "^2.0.0",
-    "core-js": "^3.4.5",
+    "core-js": "^3.4.7",
     "custom-event-polyfill": "^1.0.7",
     "debounce": "^1.2.0",
     "lodash.isequal": "^4.5.0",
diff --git a/src/components/Pickup/Map/Leaflet.vue b/src/components/Pickup/Map/Leaflet.vue
index ef39e582..f353b498 100644
--- a/src/components/Pickup/Map/Leaflet.vue
+++ b/src/components/Pickup/Map/Leaflet.vue
@@ -135,18 +135,35 @@ export default {
    * On mounting the map component, load all the needed scripts externally. This is done to not bloat the bundle size
    *  and only load the map when the user selects it.
    */
-  mounted() {
-    Promise.all([
-      createScript('https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css'),
-      createScript('https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js'),
-    ]).then(() => {
+  async mounted() {
+    // Skip all script loading if RequireJS is detected. It does NOT like us loading scripts manually.
+    const loadScripts = typeof requirejs === 'undefined';
+
+    if (loadScripts) {
+      const scripts = [];
+      const leafletCss = 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css';
+      const leafletJs = 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js';
+      const vue2LeafletJs = 'https://cdnjs.cloudflare.com/ajax/libs/Vue2Leaflet/1.0.2/vue2-leaflet.min.js';
+
+      if (!document.querySelector(`link[href="${leafletCss}"]`)) {
+        scripts.push(leafletCss);
+      }
+
+      if (typeof L === 'undefined') {
+        scripts.push(leafletJs);
+      }
+
+      await Promise.all(scripts.map((script) => createScript(script)));
+
       /**
        * This scripts depends on leaflet.js so has to wait until it's loaded.
        */
-      createScript('https://cdnjs.cloudflare.com/ajax/libs/Vue2Leaflet/1.0.2/vue2-leaflet.min.js').then(() => {
-        this.onLoadedScripts();
-      });
-    });
+      if (typeof Vue2Leaflet === 'undefined') {
+        await createScript(vue2LeafletJs);
+      }
+    }
+
+    this.onLoadedScripts();
   },
 
   created() {