@zengenti/contensis-react-base 2.4.1-beta.7 → 2.5.1-beta.0

package/esm/client.js

@@ -1,8 +1,8 @@
 import 'isomorphic-fetch';
-import 'react-loadable';
-import 'react';
-import 'react-router-dom';
-import 'react-redux';
+import { preloadReady } from 'react-loadable';
+import React from 'react';
+import { Router } from 'react-router-dom';
+import { Provider } from 'react-redux';
 import 'react-router-config';
 import 'jsonpath-mapper';
 import 'immutable';
@@ -11,23 +11,128 @@ import 'redux-immutable';
 import 'redux-thunk';
 import 'redux-saga';
 import 'redux-injectors';
-import './injectors-3cbe3981.js';
-import './actions-fda5e103.js';
-import './reducers-f855681f.js';
+import { c as createStore, s as setVersionStatus } from './version-64906b26.js';
+import { s as setCurrentProject } from './actions-ddd9c623.js';
+import { o as fromJSOrdered } from './reducers-feab84fc.js';
 import 'history';
-export { A as ReactApp } from './App-08311b77.js';
+import { d as deliveryApi, r as rootSaga, p as pickProject, b as browserHistory } from './App-d468b2a6.js';
+export { A as ReactApp } from './App-d468b2a6.js';
 import '@redux-saga/core/effects';
 import 'contensis-delivery-api';
 import './version-7fdbd2d5.js';
-import 'query-string';
-import './selectors-170581d2.js';
+import { parse } from 'query-string';
+import './selectors-68799788.js';
 import 'loglevel';
-import './ToJs-19a3244a.js';
-import './login-c05fee0e.js';
+import './ToJs-6e7b247c.js';
+import './login-1f9ad133.js';
 import 'await-to-js';
 import 'js-cookie';
-import 'react-hot-loader';
-import 'prop-types';
-import './RouteLoader-2cfdfc5c.js';
-import 'react-dom';
+import { AppContainer } from 'react-hot-loader';
+import './RouteLoader-281d47e1.js';
+import { hydrate, render } from 'react-dom';
+
+const fromJSLeaveImmer = js => {
+  // console.info(js);
+  // if (typeof js !== 'object' || js === null) return js;
+  // // console.info(`from js - here is js ${JSON.stringify(js)}`);
+  // const convertedObject = isOrdered ? OrderedMap() : fromJS({});
+  // const keys = Object.keys(js);
+  // keys.forEach(key => {
+  //   if (key === 'immer') {
+  //     convertedObject.set(key, js[key]);
+  //     // console.info(`LOOK! - immer untouched bar root key "${key}"`);
+  //   } else {
+  //     // console.info(`LOOK! - normal immutable feature "${key}"`);
+  //     convertedObject.set(key, isOrdered ? fromJSOrdered(js) : fromJS(js));
+  //   }
+  // });
+  const immutableObj = fromJSOrdered(js);
+
+  if (immutableObj && !!immutableObj.get('immer')) {
+    immutableObj.set('immer', immutableObj.get('immer').toJS());
+  }
+
+  return immutableObj;
+};
+
+class ClientApp {
+  constructor(ReactApp, config) {
+    const documentRoot = document.getElementById('root');
+    const {
+      routes,
+      withReducers,
+      withSagas,
+      withEvents
+    } = config;
+
+    const GetClientJSX = store => {
+      const ClientJsx = /*#__PURE__*/React.createElement(AppContainer, null, /*#__PURE__*/React.createElement(Provider, {
+        store: store
+      }, /*#__PURE__*/React.createElement(Router, {
+        history: browserHistory
+      }, /*#__PURE__*/React.createElement(ReactApp, {
+        routes: routes,
+        withEvents: withEvents
+      }))));
+      return ClientJsx;
+    };
+
+    const isProduction = !(process.env.NODE_ENV !== 'production');
+    /**
+     * Webpack HMR Setup.
+     */
+
+    const HMRRenderer = Component => {
+      preloadReady().then(() => {
+        if (isProduction) hydrate(Component, documentRoot);else render(Component, documentRoot);
+      });
+    };
+
+    let store = null;
+    const qs = parse(window.location.search);
+    const versionStatusFromHostname = deliveryApi.getClientSideVersionStatus();
+
+    if (window.isDynamic || window.REDUX_DATA || process.env.NODE_ENV !== 'production') {
+      store = createStore(withReducers, fromJSLeaveImmer(window.REDUX_DATA), browserHistory);
+      store.dispatch(setVersionStatus(qs.versionStatus || versionStatusFromHostname));
+      /* eslint-disable no-console */
+
+      console.log('Hydrating from inline Redux');
+      /* eslint-enable no-console */
+
+      store.runSaga(rootSaga(withSagas));
+      store.dispatch(setCurrentProject(pickProject(window.location.hostname, qs), [], window.location.hostname));
+      delete window.REDUX_DATA;
+      HMRRenderer(GetClientJSX(store));
+    } else {
+      fetch(`${window.location.pathname}?redux=true`).then(response => response.json()).then(data => {
+        /* eslint-disable no-console */
+        // console.log('Got Data Back');
+        // console.log(data);
+
+        /* eslint-enable no-console */
+        const ssRedux = JSON.parse(data);
+        store = createStore(withReducers, fromJSLeaveImmer(ssRedux), browserHistory); // store.dispatch(setVersionStatus(versionStatusFromHostname));
+
+        store.runSaga(rootSaga(withSagas));
+        store.dispatch(setCurrentProject(pickProject(window.location.hostname, parse(window.location.search)), [], window.location.hostname)); // if (typeof window != 'undefined') {
+        //   store.dispatch(checkUserLoggedIn());
+        // }
+
+        HMRRenderer(GetClientJSX(store));
+      });
+    } // webpack Hot Module Replacement API
+
+
+    if (module.hot) {
+      module.hot.accept(ReactApp, () => {
+        // if you are using harmony modules ({modules:false})
+        HMRRenderer(GetClientJSX(store));
+      });
+    }
+  }
+
+}
+
+export default ClientApp;
 //# sourceMappingURL=client.js.map

package/esm/client.js.map

@@ -1 +1 @@
-{"version":3,"file":"client.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"client.js","sources":["../src/util/fromJSLeaveImmer.js","../src/client/client.tsx"],"sourcesContent":["import fromJSOrdered from './fromJSOrdered';\n\nconst fromJSLeaveImmer = js => {\n  // console.info(js);\n  // if (typeof js !== 'object' || js === null) return js;\n  // // console.info(`from js - here is js ${JSON.stringify(js)}`);\n  // const convertedObject = isOrdered ? OrderedMap() : fromJS({});\n  // const keys = Object.keys(js);\n  // keys.forEach(key => {\n  //   if (key === 'immer') {\n  //     convertedObject.set(key, js[key]);\n  //     // console.info(`LOOK! - immer untouched bar root key \"${key}\"`);\n  //   } else {\n  //     // console.info(`LOOK! - normal immutable feature \"${key}\"`);\n  //     convertedObject.set(key, isOrdered ? fromJSOrdered(js) : fromJS(js));\n  //   }\n  // });\n  const immutableObj = fromJSOrdered(js);\n  if (immutableObj && !!immutableObj.get('immer')) {\n    immutableObj.set('immer', immutableObj.get('immer').toJS());\n  }\n  return immutableObj;\n};\nexport default fromJSLeaveImmer;\n","import 'isomorphic-fetch';\nimport React from 'react';\nimport { render, hydrate } from 'react-dom';\nimport { Router } from 'react-router-dom';\nimport { preloadReady } from 'react-loadable';\nimport { AppContainer } from 'react-hot-loader';\nimport { Provider as ReduxProvider } from 'react-redux';\nimport * as queryString from 'query-string';\n// import { fromJS } from 'immutable';\n\nimport createStore from '~/redux/store/store';\nimport { browserHistory as history } from '~/redux/store/history';\nimport rootSaga from '~/redux/sagas';\n\nimport { setVersionStatus } from '~/redux/actions/version';\nimport { deliveryApi } from '~/util/ContensisDeliveryApi';\nimport { setCurrentProject } from '~/routing/redux/actions';\nimport pickProject from '~/util/pickProject';\n// import fromJSOrdered from '~/util/fromJSOrdered';\nimport fromJSLeaveImmer from '~/util/fromJSLeaveImmer';\n\nimport { AppConfig } from '~/config';\n\ndeclare let window: typeof globalThis & {\n  isDynamic;\n  REDUX_DATA;\n};\n\ntype ReactAppProps = { routes: any; withEvents: any };\n\nclass ClientApp {\n  constructor(ReactApp: React.ComponentType<ReactAppProps>, config: AppConfig) {\n    const documentRoot = document.getElementById('root');\n\n    const { routes, withReducers, withSagas, withEvents } = config;\n\n    const GetClientJSX = store => {\n      const ClientJsx = (\n        <AppContainer>\n          <ReduxProvider store={store}>\n            <Router history={history}>\n              <ReactApp routes={routes} withEvents={withEvents} />\n            </Router>\n          </ReduxProvider>\n        </AppContainer>\n      );\n      return ClientJsx;\n    };\n\n    const isProduction = !(process.env.NODE_ENV !== 'production');\n\n    /**\n     * Webpack HMR Setup.\n     */\n    const HMRRenderer = Component => {\n      preloadReady().then(() => {\n        if (isProduction) hydrate(Component, documentRoot);\n        else render(Component, documentRoot);\n      });\n    };\n    let store: any = null;\n    const qs = queryString.parse(window.location.search);\n\n    const versionStatusFromHostname = deliveryApi.getClientSideVersionStatus();\n    if (\n      window.isDynamic ||\n      window.REDUX_DATA ||\n      process.env.NODE_ENV !== 'production'\n    ) {\n      store = createStore(\n        withReducers,\n        fromJSLeaveImmer(window.REDUX_DATA),\n        history\n      );\n      store.dispatch(\n        setVersionStatus(qs.versionStatus || versionStatusFromHostname)\n      );\n\n      /* eslint-disable no-console */\n      console.log('Hydrating from inline Redux');\n      /* eslint-enable no-console */\n      store.runSaga(rootSaga(withSagas));\n      store.dispatch(\n        setCurrentProject(\n          pickProject(window.location.hostname, qs),\n          [],\n          window.location.hostname\n        )\n      );\n\n      delete window.REDUX_DATA;\n      HMRRenderer(GetClientJSX(store));\n    } else {\n      fetch(`${window.location.pathname}?redux=true`)\n        .then(response => response.json())\n        .then(data => {\n          /* eslint-disable no-console */\n          // console.log('Got Data Back');\n          // console.log(data);\n          /* eslint-enable no-console */\n          const ssRedux = JSON.parse(data);\n          store = createStore(withReducers, fromJSLeaveImmer(ssRedux), history);\n          // store.dispatch(setVersionStatus(versionStatusFromHostname));\n\n          store.runSaga(rootSaga(withSagas));\n          store.dispatch(\n            setCurrentProject(\n              pickProject(\n                window.location.hostname,\n                queryString.parse(window.location.search)\n              ),\n              [],\n              window.location.hostname\n            )\n          );\n          // if (typeof window != 'undefined') {\n          //   store.dispatch(checkUserLoggedIn());\n          // }\n          HMRRenderer(GetClientJSX(store));\n        });\n    }\n\n    // webpack Hot Module Replacement API\n    if (module.hot) {\n      module.hot.accept(ReactApp as unknown as string, () => {\n        // if you are using harmony modules ({modules:false})\n        HMRRenderer(GetClientJSX(store));\n      });\n    }\n  }\n}\n\nexport default ClientApp;\n"],"names":["fromJSLeaveImmer","js","immutableObj","fromJSOrdered","get","set","toJS","ClientApp","constructor","ReactApp","config","documentRoot","document","getElementById","routes","withReducers","withSagas","withEvents","GetClientJSX","store","ClientJsx","ReduxProvider","history","isProduction","process","env","NODE_ENV","HMRRenderer","Component","preloadReady","then","hydrate","render","qs","queryString","window","location","search","versionStatusFromHostname","deliveryApi","getClientSideVersionStatus","isDynamic","REDUX_DATA","createStore","dispatch","setVersionStatus","versionStatus","console","log","runSaga","rootSaga","setCurrentProject","pickProject","hostname","fetch","pathname","response","json","data","ssRedux","JSON","parse","module","hot","accept"],"mappings":"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"}

package/esm/contensis-react-base.js

@@ -4,43 +4,42 @@ import Loadable from 'react-loadable';
 import httpProxy from 'http-proxy';
 import fs from 'fs';
 import path from 'path';
+import { path as path$1 } from 'app-root-path';
 import React from 'react';
+import { renderToString } from 'react-dom/server';
 import { StaticRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
-import { renderToString } from 'react-dom/server';
 import { matchRoutes } from 'react-router-config';
-import { getBundles } from 'react-loadable/webpack';
-import { ServerStyleSheet } from 'styled-components';
 import Helmet from 'react-helmet';
+import { ServerStyleSheet } from 'styled-components';
 import serialize from 'serialize-javascript';
 import minifyCssString from 'minify-css-string';
 import mapJson from 'jsonpath-mapper';
+import { ChunkExtractor, ChunkExtractorManager } from '@loadable/server';
 import { fromJS } from 'immutable';
 import 'redux';
 import 'redux-immutable';
 import 'redux-thunk';
 import 'redux-saga';
 import 'redux-injectors';
-import { c as createStore } from './injectors-3cbe3981.js';
-import { s as setCurrentProject } from './actions-fda5e103.js';
-import './reducers-f855681f.js';
+import { c as createStore, s as setVersionStatus, a as setVersion } from './version-64906b26.js';
+import { s as setCurrentProject } from './actions-ddd9c623.js';
+import './reducers-feab84fc.js';
 import 'history';
-import { r as registerSagas, a as routingSagas, n as navigationSagas, h as history, d as deliveryApi, p as pickProject } from './App-08311b77.js';
-export { A as ReactApp } from './App-08311b77.js';
-import { all } from '@redux-saga/core/effects';
+import { h as history, d as deliveryApi, p as pickProject, r as rootSaga } from './App-d468b2a6.js';
+export { A as ReactApp } from './App-d468b2a6.js';
+import '@redux-saga/core/effects';
 import 'contensis-delivery-api';
 import './version-7fdbd2d5.js';
 import 'query-string';
-import { s as selectRouteEntry, a as selectCurrentProject } from './selectors-170581d2.js';
+import { s as selectRouteEntry, a as selectCurrentProject } from './selectors-68799788.js';
 import 'loglevel';
-import './ToJs-19a3244a.js';
-import { l as loginSagas } from './login-c05fee0e.js';
+import './ToJs-6e7b247c.js';
+import './login-1f9ad133.js';
 import 'await-to-js';
 import 'js-cookie';
-import { s as setVersionStatus, a as setVersion } from './version-937d57fb.js';
 import 'react-hot-loader';
-import 'prop-types';
-import './RouteLoader-2cfdfc5c.js';
+import './RouteLoader-281d47e1.js';
 
 const servers = SERVERS;
 /* global SERVERS */
@@ -67,7 +66,7 @@ const servers$1 = SERVERS;
 
 const apiProxy = httpProxy.createProxyServer();
 
-const reverseProxies = (app, reverseProxyPaths) => {
+const reverseProxies = (app, reverseProxyPaths = []) => {
   deliveryApiProxy(apiProxy, app);
   app.all(reverseProxyPaths, (req, res) => {
     const target = req.hostname.indexOf('preview-') || req.hostname.indexOf('preview.') || req.hostname === 'localhost' ? servers$1.previewIis || servers$1.iis : servers$1.iis;
@@ -114,7 +113,7 @@ const getCacheDuration = (status = 200) => {
   return CacheDuration[200];
 };
 
-const replaceStaticPath = (string, staticFolderPath = 'static') => string.replace(/static\//g, `${staticFolderPath}/`);
+const replaceStaticPath = (str, staticFolderPath = 'static') => str.replace(/static\//g, `${staticFolderPath}/`);
 
 const bundleManipulationMiddleware = ({
   appRootPath,
@@ -174,8 +173,9 @@ const resolveStartupMiddleware = ({
   }
 };
 
+// Serving static assets
 const staticAssets = (app, {
-  appRootPath = require('app-root-path').path,
+  appRootPath = path$1,
   scripts = {},
   startupScriptFilename = 'startup.js',
   staticFolderPath = 'static',
@@ -193,54 +193,108 @@ const staticAssets = (app, {
     maxage: CacheDuration.static,
     startupScriptFilename: scripts.startup || startupScriptFilename,
     staticFolderPath
-  }), express.static(`dist/${staticFolderPath}`, {
+  }), // eslint-disable-next-line import/no-named-as-default-member
+  express.static(`dist/${staticFolderPath}`, {
     // these maxage values are different in config but the same in runtime,
     // this one is somehow converted and should end up being the same as CacheDuration.static
-    maxage: CacheDuration.expressStatic
+    maxAge: CacheDuration.expressStatic
   }));
 };
 
-/*! fromentries. MIT License. Feross Aboukhadijeh <https://feross.org/opensource> */
-var fromentries = function fromEntries (iterable) {
-  return [...iterable].reduce((obj, [key, val]) => {
-    obj[key] = val;
-    return obj
-  }, {})
-};
-
-const userSagas = [...loginSagas, ...registerSagas];
-
-// index.js
-function rootSaga (featureSagas = []) {
-  return function* rootSaga() {
-    const subSagas = [...routingSagas, ...navigationSagas, ...userSagas];
-    yield all([...subSagas, ...featureSagas]);
-  };
-}
-
-const ResponseMethod = {
-  send: 'send',
-  json: 'json',
-  end: 'end'
-};
-
 /* eslint-disable no-console */
+
 /**
  * Web Application Response handler, sends a prepared express js response
  * with the supplied content sending in the specified manner
  * @param {response} request express js request object
  * @param {response} response express js response object
  * @param {string | object} content the content to send in the response body
- * @param {function} send the response function to call e.g res.send() res.json() res.end()
+ * @param {"send" | "json" | "end"} send the response function to call e.g res.send() res.json() res.end()
  */
-
-const handleResponse = (request, response, content, send = ResponseMethod.send) => {
+const handleResponse = (request, response, content, send = 'send') => {
   // console.log('---', response.statusCode, '---');
   response[send](content);
 };
 
 var stringifyAttributes = ((attributes = {}) => Object.entries(attributes).map(([key, value], idx) => `${idx !== 0 ? ' ' : ''}${key}${value ? `="${value}"` : ''}`).join(' '));
 
+const readFileSync = path => fs.readFileSync(path, 'utf8');
+
+const loadableBundleData = ({
+  stats,
+  templates
+}, staticRoutePath, build) => {
+  const bundle = {};
+
+  try {
+    bundle.stats = JSON.parse(readFileSync(stats.replace('/target', build ? `/${build}` : '')));
+  } catch (ex) {
+    // console.info(ex);
+    bundle.stats = null;
+  }
+
+  try {
+    bundle.templates = {
+      templateHTML: replaceStaticPath(readFileSync(templates.html.replace('/target', build ? `/${build}` : '')), staticRoutePath),
+      templateHTMLStatic: replaceStaticPath(readFileSync(templates.static.replace('/target', build ? `/${build}` : '')), staticRoutePath),
+      templateHTMLFragment: replaceStaticPath(readFileSync(templates.fragment.replace('/target', build ? `/${build}` : '')), staticRoutePath)
+    };
+  } catch (ex) {
+    // console.info(ex);
+    bundle.templates = null;
+  }
+
+  return bundle;
+};
+const loadableChunkExtractors = () => {
+  try {
+    const modern = new ChunkExtractor({
+      entrypoints: ['app'],
+      namespace: 'modern',
+      statsFile: path.resolve('dist/modern/loadable-stats.json')
+    });
+    const legacy = new ChunkExtractor({
+      entrypoints: ['app'],
+      namespace: 'legacy',
+      statsFile: path.resolve('dist/legacy/loadable-stats.json')
+    });
+    const commonLoadableExtractor = {
+      addChunk(chunk) {
+        modern.addChunk(chunk);
+        if (typeof legacy.stats.assetsByChunkName[chunk] !== 'undefined') legacy.addChunk(chunk);
+      }
+
+    };
+    return {
+      commonLoadableExtractor,
+      modern,
+      legacy
+    };
+  } catch (e) {
+    console.info('@loadable/server ChunkExtractor not available');
+  }
+};
+const getBundleData = (config, staticRoutePath) => {
+  const bundleData = {
+    default: loadableBundleData(config, staticRoutePath),
+    legacy: loadableBundleData(config, staticRoutePath, 'legacy'),
+    modern: loadableBundleData(config, staticRoutePath, 'modern')
+  };
+  if (!bundleData.default || bundleData.default === {}) bundleData.default = bundleData.legacy || bundleData.modern;
+  return bundleData;
+};
+const getBundleTags = loadableExtractor => {
+  if (loadableExtractor) {
+    const legacyScriptTags = loadableExtractor === null || loadableExtractor === void 0 ? void 0 : loadableExtractor.legacy.getScriptTags({
+      noModule: true
+    });
+    const modernScriptTags = loadableExtractor === null || loadableExtractor === void 0 ? void 0 : loadableExtractor.modern.getScriptTags({
+      type: 'module'
+    });
+    return legacyScriptTags + modernScriptTags;
+  }
+};
+
 const addStandardHeaders = (state, response, packagejson, groups) => {
   if (state) {
     try {
@@ -255,7 +309,6 @@ const addStandardHeaders = (state, response, packagejson, groups) => {
     }
   }
 };
-
 const addVarnishAuthenticationHeaders = (state, response, groups = {}) => {
   if (state) {
     try {
@@ -279,35 +332,6 @@ const addVarnishAuthenticationHeaders = (state, response, groups = {}) => {
   }
 };
 
-const readFileSync = path => fs.readFileSync(path, 'utf8');
-
-const loadableBundleData = ({
-  stats,
-  templates
-}, staticRoutePath, build) => {
-  const bundle = {};
-
-  try {
-    bundle.stats = JSON.parse(readFileSync(stats.replace('/target', build ? `/${build}` : '')));
-  } catch (ex) {
-    //console.info(ex);
-    bundle.stats = null;
-  }
-
-  try {
-    bundle.templates = {
-      templateHTML: replaceStaticPath(readFileSync(templates.html.replace('/target', build ? `/${build}` : '')), staticRoutePath),
-      templateHTMLStatic: replaceStaticPath(readFileSync(templates.static.replace('/target', build ? `/${build}` : '')), staticRoutePath),
-      templateHTMLFragment: replaceStaticPath(readFileSync(templates.fragment.replace('/target', build ? `/${build}` : '')), staticRoutePath)
-    };
-  } catch (ex) {
-    //console.info(ex);
-    bundle.templates = null;
-  }
-
-  return bundle;
-};
-
 const webApp = (app, ReactApp, config) => {
   const {
     routes,
@@ -325,12 +349,7 @@ const webApp = (app, ReactApp, config) => {
     handleResponses
   } = config;
   const staticRoutePath = config.staticRoutePath || staticFolderPath;
-  const bundleData = {
-    default: loadableBundleData(config, staticRoutePath),
-    legacy: loadableBundleData(config, staticRoutePath, 'legacy'),
-    modern: loadableBundleData(config, staticRoutePath, 'modern')
-  };
-  if (!bundleData.default || bundleData.default === {}) bundleData.default = bundleData.legacy || bundleData.modern;
+  const bundleData = getBundleData(config, staticRoutePath);
   const attributes = stringifyAttributes(scripts.attributes);
   scripts.startup = scripts.startup || startupScriptFilename;
   const responseHandler = typeof handleResponses === 'function' ? handleResponses : handleResponse;
@@ -381,9 +400,9 @@ const webApp = (app, ReactApp, config) => {
     const project = pickProject(request.hostname, request.query);
     const groups = allowedGroups && allowedGroups[project];
     store.dispatch(setCurrentProject(project, groups, request.hostname));
-    const modules = [];
-    const jsx = /*#__PURE__*/React.createElement(Loadable.Capture, {
-      report: moduleName => modules.push(moduleName)
+    const loadableExtractor = loadableChunkExtractors();
+    const jsx = /*#__PURE__*/React.createElement(ChunkExtractorManager, {
+      extractor: loadableExtractor === null || loadableExtractor === void 0 ? void 0 : loadableExtractor.commonLoadableExtractor
     }, /*#__PURE__*/React.createElement(Provider, {
       store: store
     }, /*#__PURE__*/React.createElement(StaticRouter, {
@@ -393,33 +412,22 @@ const webApp = (app, ReactApp, config) => {
       routes: routes,
       withEvents: withEvents
     }))));
-
-    const buildBundleTags = bundles => {
-      // Take the bundles returned from Loadable.Capture
-      const bundleTags = bundles.filter(b => b).map(bundle => {
-        if (bundle.publicPath.includes('/modern/')) return differentialBundles ? `<script ${attributes} type="module" src="${replaceStaticPath(bundle.publicPath, staticRoutePath)}"></script>` : null;
-        return `<script ${attributes} nomodule src="${replaceStaticPath(bundle.publicPath, staticRoutePath)}"></script>`;
-      }).filter(f => f); // Add the static startup script to the bundleTags
-
-      scripts.startup && bundleTags.push(`<script ${attributes} src="/${staticRoutePath}/${scripts.startup}"></script>`);
-      return bundleTags;
-    };
-
     const templates = bundleData.default.templates || bundleData.legacy.templates;
-    const stats = bundleData.modern.stats && bundleData.legacy.stats ? fromentries(Object.entries(bundleData.modern.stats).map(([lib, paths]) => [lib, bundleData.legacy.stats[lib] ? [...paths, ...bundleData.legacy.stats[lib]] : paths])) : bundleData.default.stats;
     const {
       templateHTML,
       templateHTMLFragment,
       templateHTMLStatic
-    } = templates; // Serve a blank HTML page with client scripts to load the app in the browser
+    } = templates || {}; // Serve a blank HTML page with client scripts to load the app in the browser
 
     if (accessMethod.DYNAMIC) {
       // Dynamic doesn't need sagas
       renderToString(jsx); // Dynamic page render has only the necessary bundles to start up the app
       // and does not include any react-loadable code-split bundles
 
-      const loadableBundles = getBundles(stats, modules);
-      const bundleTags = buildBundleTags(loadableBundles).join('');
+      let bundleTags = ''; // Add the static startup script to the bundleTags
+
+      if (scripts.startup) bundleTags = `<script ${attributes} src="/${staticRoutePath}/${scripts.startup}"></script>`;
+      bundleTags += getBundleTags(loadableExtractor);
       const isDynamicHint = `<script ${attributes}>window.isDynamic = true;</script>`;
       const responseHtmlDynamic = templateHTML.replace('{{TITLE}}', '').replace('{{SEO_CRITICAL_METADATA}}', '').replace('{{CRITICAL_CSS}}', '').replace('{{APP}}', '').replace('{{LOADABLE_CHUNKS}}', bundleTags).replace('{{REDUX_DATA}}', isDynamicHint); // Dynamic pages always return a 200 so we can run
       // the app and serve up all errors inside the client
@@ -447,11 +455,13 @@ const webApp = (app, ReactApp, config) => {
         const styleTags = sheet.getStyleTags(); // After running rootSaga there should be an additional react-loadable
         // code-split bundle for a page component as well as core app bundles
 
-        const loadableBundles = getBundles(stats, modules);
-        const bundleTags = buildBundleTags(loadableBundles).join('');
+        let bundleTags = ''; // Add the static startup script to the bundleTags
+
+        if (scripts.startup) bundleTags = `<script ${attributes} src="/${staticRoutePath}/${scripts.startup}"></script>`;
+        bundleTags += getBundleTags(loadableExtractor);
         let serialisedReduxData = '';
 
-        if (context.status !== 404) {
+        if (context.statusCode !== 404) {
           // For a request that returns a redux state object as a response
           if (accessMethod.REDUX) {
             serialisedReduxData = serialize(reduxState, {
@@ -473,13 +483,13 @@ const webApp = (app, ReactApp, config) => {
           }
         }
 
-        if (context.status > 400) {
+        if ((context.statusCode || 200) > 400) {
           accessMethod.STATIC = true;
         } // Responses
 
 
         let responseHTML = '';
-        if (context.status === 404) title = '<title>404 page not found</title>'; // Static page served as a fragment
+        if (context.statusCode === 404) title = '<title>404 page not found</title>'; // Static page served as a fragment
 
         if (accessMethod.FRAGMENT && accessMethod.STATIC) {
           responseHTML = minifyCssString(styleTags) + html;
@@ -501,7 +511,7 @@ const webApp = (app, ReactApp, config) => {
         } // Set response.status from React StaticRouter
 
 
-        if (typeof context.status === 'number') response.status(context.status);
+        if (typeof context.statusCode === 'number') response.status(context.statusCode);
         addStandardHeaders(reduxState, response, packagejson, {
           allowedGroups,
           globalGroups
@@ -536,9 +546,9 @@ const app = express();
 
 const start = (ReactApp, config, ServerFeatures) => {
   global.PACKAGE_JSON = config.packagejson;
-  global.REVERSE_PROXY_PATHS = Object(config.reverseProxyPaths);
-  global.PROXY_DELIVERY_API = config.proxyDeliveryApi;
   global.DISABLE_SSR_REDUX = config.disableSsrRedux;
+  global.PROXY_DELIVERY_API = config.proxyDeliveryApi;
+  global.REVERSE_PROXY_PATHS = Object(config.reverseProxyPaths);
   app.disable('x-powered-by'); // Output some information about the used build/startup configuration
 
   DisplayStartupConfiguration(config);
@@ -550,9 +560,9 @@ const start = (ReactApp, config, ServerFeatures) => {
   webApp(app, ReactApp, config);
   app.on('ready', async () => {
     // Configure DNS to make life easier
-    //await ConfigureLocalDNS();
+    // await ConfigureLocalDNS();
     Loadable.preloadAll().then(() => {
-      var server = app.listen(3001, () => {
+      const server = app.listen(3001, () => {
         console.info(`HTTP server is listening @ port 3001`);
         setTimeout(function () {
           app.emit('app_started');