From 479412888d5e3a8a1733869c4e5d2fcdbbe77b9c Mon Sep 17 00:00:00 2001
From: "Matt (IPv4) Cowley" <me@mattcowley.co.uk>
Date: Tue, 5 Jan 2021 15:29:13 +0000
Subject: [PATCH] Set dynamic webpack import path (#208)

* Set dynamic webpack import path

* Cleanup
---
 package-lock.json        | 15 ++++++++++-----
 package.json             |  3 ++-
 src/nginxconfig/mount.js | 12 +++++++++++-
 vue.config.js            |  4 +++-
 4 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7a22fa8..6f2f0ec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12333,11 +12333,6 @@
         "ws": "^5.1.1"
       },
       "dependencies": {
-        "core-js": {
-          "version": "2.6.12",
-          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
-          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
-        },
         "chalk": {
           "version": "2.4.2",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -12348,6 +12343,11 @@
             "supports-color": "^5.3.0"
           }
         },
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+        },
         "dotenv": {
           "version": "5.0.1",
           "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-5.0.1.tgz",
@@ -17770,6 +17770,11 @@
         "lodash": "^4.17.15"
       }
     },
+    "webpack-require-from": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/webpack-require-from/-/webpack-require-from-1.8.2.tgz",
+      "integrity": "sha512-N9kDFNGNEnmuM/riUm/yNXhefAUCUG50sVV509n0WtCdKlIjMYebVwGsEujDKRRiy539J84oOZlrZim9FJXNPA=="
+    },
     "webpack-sources": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz",
diff --git a/package.json b/package.json
index 4a5775f..610552c 100644
--- a/package.json
+++ b/package.json
@@ -58,7 +58,8 @@
     "simple-js-sha2-256": "^1.0.7",
     "vue": "^2.6.12",
     "vue-i18n": "^8.22.2",
-    "vue-select": "^3.10.8"
+    "vue-select": "^3.10.8",
+    "webpack-require-from": "^1.8.2"
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.10.4",
diff --git a/src/nginxconfig/mount.js b/src/nginxconfig/mount.js
index dd0aadb..0632ae2 100644
--- a/src/nginxconfig/mount.js
+++ b/src/nginxconfig/mount.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2020 DigitalOcean
+Copyright 2021 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -24,12 +24,22 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 */
 
+// Dynamic webpack import location (must be before app)
+const originalSrcDir = document.currentScript.src.split('/').slice(0, -1).join('/');
+(typeof global === 'undefined' ? window : global).__replaceWebpackDynamicImport = path => {
+    const base = path.split('/').pop();
+    console.log(`Modifying import ${path} to use dir ${originalSrcDir} and base ${base}`);
+    return `${originalSrcDir}/${base}`;
+};
+
+// Load in the app
 import './scss/style.scss';
 import Vue from 'vue';
 import './util/prism_bundle';
 import { i18n } from './i18n/setup';
 import App from './templates/app';
 
+// Run the app
 new Vue({
     i18n,
     render: h => h(App),
diff --git a/vue.config.js b/vue.config.js
index 5312a44..5288bd0 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2020 DigitalOcean
+Copyright 2021 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -27,6 +27,7 @@ THE SOFTWARE.
 const path = require('path');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin');
+const WebpackRequireFrom = require('webpack-require-from');
 
 module.exports = {
     publicPath: './',
@@ -38,6 +39,7 @@ module.exports = {
         plugins: [
             process.argv.includes('--analyze') && new BundleAnalyzerPlugin(),
             process.argv.includes('--analyze') && new DuplicatePackageCheckerPlugin(),
+            new WebpackRequireFrom({ replaceSrcMethodName: '__replaceWebpackDynamicImport' }),
         ].filter(x => !!x),
     },
     chainWebpack: config => {