Set dynamic webpack import path (#208)

* Set dynamic webpack import path

* Cleanup

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",

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",

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),

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 => {