move webpack publicPath setup earlier in the bootstrap processes to avoid ES module execution order issues

4 files changed, 16 insertions, 10 deletions

diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index e11d11f87af..a4bcb14b636 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -164,14 +164,6 @@ import './visibility_select';
 import './wikis';
 import './zen_mode';
 
-// set url root for webpack async chunks (assumes config.output.publicPath is an absolute path)
-if (gon && gon.relative_url_root) {
-  const basePath = gon.relative_url_root.replace(/\/$/, '');
-
-  // eslint-disable-next-line camelcase, no-undef
-  __webpack_public_path__ = basePath + __webpack_public_path__;
-}
-
 // eslint-disable-next-line global-require, import/no-commonjs
 if (process.env.NODE_ENV !== 'production') require('./test_utils/');
 
diff --git a/app/assets/javascripts/webpack.js b/app/assets/javascripts/webpack.js
new file mode 100644
index 00000000000..37420dcafa0
--- /dev/null
+++ b/app/assets/javascripts/webpack.js
@@ -0,0 +1,13 @@
+/**
+ * This is the first script loaded by webpack's runtime. It is used to manually configure
+ * config.output.publicPath to account for relative_url_root settings which cannot be baked-in
+ * to our webpack bundles.
+ */
+
+if (gon && gon.relative_url_root) {
+  // this assumes config.output.publicPath is an absolute path
+  const basePath = gon.relative_url_root.replace(/\/$/, '');
+
+  // eslint-disable-next-line camelcase, no-undef
+  __webpack_public_path__ = basePath + __webpack_public_path__;
+}
diff --git a/app/views/layouts/_head.html.haml b/app/views/layouts/_head.html.haml
index eabc9a3b01c..a966349523f 100644
--- a/app/views/layouts/_head.html.haml
+++ b/app/views/layouts/_head.html.haml
@@ -36,7 +36,7 @@
 
   = Gon::Base.render_data
 
-  = webpack_bundle_tag "runtime"
+  = webpack_bundle_tag "webpack_runtime"
   = webpack_bundle_tag "common"
   = webpack_bundle_tag "locale"
   = webpack_bundle_tag "main"
diff --git a/config/webpack.config.js b/config/webpack.config.js
index 39e665d5c14..a2e7a93d501 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -71,6 +71,7 @@ var config = {
     vue_merge_request_widget: './vue_merge_request_widget/index.js',
     test:                 './test.js',
     peek:                 './peek.js',
+    webpack_runtime:      './webpack.js',
   },
 
   output: {
@@ -189,7 +190,7 @@ var config = {
 
     // create cacheable common library bundles
     new webpack.optimize.CommonsChunkPlugin({
-      names: ['main', 'locale', 'common', 'runtime'],
+      names: ['main', 'locale', 'common', 'webpack_runtime'],
     }),
   ],