ensure dynamic imports use proper path/url

client/coral-framework/constants/config.js

@@ -0,0 +1,11 @@
+// This is always loaded in the body of the page, meaning that the dom element
+// for this data blob is always loaded when we render this piece.
+const CONFIG_ELEMENT = document.querySelector('#data');
+
+// Parse the configuration from that element if it exists, otherwise, an empty
+// object.
+const CONFIG = CONFIG_ELEMENT ? JSON.parse(CONFIG_ELEMENT.textContent) : {};
+
+// Export the expected fields.
+export const LIVE_URI = CONFIG.LIVE_URI;
+export const STATIC_URL = CONFIG.STATIC_URL;

client/coral-framework/helpers/publicPath.js

@@ -0,0 +1,13 @@
+/* global __webpack_public_path__ */ // eslint-disable-line no-unused-vars
+
+import { STATIC_URL } from 'coral-framework/constants/config';
+
+// Update the static url for the imported public path so dynamically imported
+// chunks will use the correct path as defined by the process.env.STATIC_URL
+// that is provided dynamically from the template. This is a better solution to
+// embedding the environment variables as changes won't require recompilation.
+//
+// The __webpack_public_path__ can be referenced:
+// https://webpack.js.org/configuration/output/#output-publicpath
+//
+__webpack_public_path__ = STATIC_URL + 'static/';

client/coral-framework/services/bootstrap.js

@@ -1,3 +1,4 @@
+import { LIVE_URI } from 'coral-framework/constants/config';
 import { createStore } from './store';
 import { createClient, apolloErrorReporter } from './client';
 import pym from './pym';
@@ -22,27 +23,6 @@ import { createHistory } from 'coral-framework/services/history';
 import { createIntrospection } from 'coral-framework/services/introspection';
 import introspectionData from 'coral-framework/graphql/introspection.json';
 
-/**
- * getStaticConfiguration will return a singleton of the static configuration
- * object provided via a JSON DOM element.
- */
-const getStaticConfiguration = (() => {
-  let staticConfiguration = null;
-  return () => {
-    if (staticConfiguration != null) {
-      return staticConfiguration;
-    }
-
-    const configElement = document.querySelector('#data');
-
-    staticConfiguration = JSON.parse(
-      configElement ? configElement.textContent : '{}'
-    );
-
-    return staticConfiguration;
-  };
-})();
-
 /**
  * getAuthToken returns the active auth token or null
  *   Note: this method does not have access to the cookie based token used by
@@ -103,10 +83,8 @@ export async function createContext({
     token,
   });
 
-  // Try to get an overrided liveUri from the static config, if none is found,
-  // build it.
-  let { LIVE_URI: liveUri } = getStaticConfiguration();
-  if (liveUri == null) {
+  let liveUri = null;
+  if (LIVE_URI == null) {
     // The protocol must match the origin protocol, secure/insecure.
     const protocol = location.protocol === 'https:' ? 'wss' : 'ws';
 

webpack.config.js

@@ -54,7 +54,7 @@ const config = {
   target: 'web',
   output: {
     path: path.join(__dirname, 'dist'),
-    publicPath: '/static/',
+    publicPath: '',
     filename: '[name].js',
     chunkFilename: '[name].chunk.js',
   },
@@ -249,13 +249,19 @@ const applyConfig = (entries, root = {}) =>
     config,
     {
       entry: entries.reduce(
-        (entry, { name, path, disablePolyfill = false }) => {
+        (entry, { name, path: modulePath, disablePolyfill = false }) => {
+          const entries = [
+            path.join(__dirname, 'client/coral-framework/helpers/publicPath'),
+          ];
           if (disablePolyfill) {
-            entry[name] = path;
+            entries.push(modulePath);
           } else {
-            entry[name] = ['babel-polyfill', path];
+            entries.unshift('babel-polyfill');
+            entries.push(modulePath);
           }
 
+          entry[name] = entries;
+
           return entry;
         },
         {}