Fix webpack dynamic imports (#266)

* Update all deps

* Update dynamic import injection

package.json

@@ -62,10 +62,10 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/plugin-transform-runtime": "^7.13.15",
+    "@babel/plugin-transform-runtime": "^7.14.3",
-    "@babel/preset-env": "^7.14.1",
+    "@babel/preset-env": "^7.14.2",
     "@babel/runtime": "^7.14.0",
-    "@vue/cli-service": "^5.0.0-beta.0",
+    "@vue/cli-service": "^5.0.0-beta.1",
     "babel-eslint": "^10.1.0",
     "chalk": "^4.1.1",
     "copyfiles": "^2.4.1",
@@ -77,10 +77,10 @@
     "jest": "^26.6.3",
     "node-fetch": "^2.6.1",
     "postcss": "^8.2.15",
-    "sass": "^1.32.12",
+    "sass": "^1.32.13",
     "sass-lint": "git+https://github.com/do-community/sass-lint.git",
-    "sass-loader": "^11.1.0",
+    "sass-loader": "^11.1.1",
     "vue-template-compiler": "^2.6.12",
-    "webpack-bundle-analyzer": "^4.4.1"
+    "webpack-bundle-analyzer": "^4.4.2"
   }
 }

src/nginxconfig/build/webpack-dynamic-import.js

@@ -0,0 +1,31 @@
+/*
+Copyright 2021 DigitalOcean
+
+This code is licensed under the MIT License.
+You may obtain a copy of the License at
+https://github.com/digitalocean/nginxconfig.io/blob/master/LICENSE or https://mit-license.org/
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and / or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions :
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+const originalSrcDir = document.currentScript.src.split('/').slice(0, -2).join('/') + '/';
+window.__webpackDynamicImportURL = () => {
+    console.info(`Using ${originalSrcDir} for webpack dynamic import`);
+    return originalSrcDir;
+};

src/nginxconfig/mount.js

@@ -24,14 +24,6 @@ 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';

vue.config.js

@@ -40,9 +40,16 @@ module.exports = {
     configureWebpack: {
         node: false, // Disable Node.js polyfills (Buffer etc.) -- This will be default in Webpack 5
         plugins: [
+            // Fix dynamic imports from CDN (inject as first entry point before any imports can happen)
+            { apply: compiler => {
+                compiler.options.entry.app.import.unshift(
+                    path.join(__dirname, 'src', 'nginxconfig', 'build', 'webpack-dynamic-import.js'),
+                );
+            } },
+            new WebpackRequireFrom({ methodName: '__webpackDynamicImportURL' }),
+            // Analyze the bundle
             process.argv.includes('--analyze') && new BundleAnalyzerPlugin(),
             process.argv.includes('--analyze') && new DuplicatePackageCheckerPlugin(),
-            new WebpackRequireFrom({ replaceSrcMethodName: '__replaceWebpackDynamicImport' }),
         ].filter(x => !!x),
     },
     chainWebpack: config => {