aspnet-webpack auto-loads 'event-source-polyfill' on client when HMR is enabled. This requires 'event-source-polyfill' to be included in the client-side bundle, so it's also now added to all the templates' vendor bundles. Fixes #365.

Author: SteveSandersonMS

src/Microsoft.AspNetCore.SpaServices/npm/aspnet-webpack/src/WebpackDevMiddleware.ts

@@ -26,10 +26,6 @@ interface DevServerOptions {
     ReactHotModuleReplacement: boolean;
 }
 
-function arrayContainsStringStartingWith(array: string[], prefixToFind: string) {
-    return array.some(item => item.substring(0, prefixToFind.length) === prefixToFind);
-}
-
 function attachWebpackDevMiddleware(app: any, webpackConfig: webpack.Configuration, enableHotModuleReplacement: boolean, enableReactHotModuleReplacement: boolean, hmrEndpoint: string) {
     // Build the final Webpack config based on supplied options
     if (enableHotModuleReplacement) {
@@ -49,9 +45,23 @@ function attachWebpackDevMiddleware(app: any, webpackConfig: webpack.Configurati
             const webpackHotMiddlewareOptions = `?path=` + encodeURIComponent(hmrEndpoint);
             if (typeof entryPoints[entryPointName] === 'string') {
                 entryPoints[entryPointName] = [webpackHotMiddlewareEntryPoint + webpackHotMiddlewareOptions, entryPoints[entryPointName]];
-            } else if (!arrayContainsStringStartingWith(entryPoints[entryPointName], webpackHotMiddlewareEntryPoint)) {
+            } else if (firstIndexOfStringStartingWith(entryPoints[entryPointName], webpackHotMiddlewareEntryPoint) < 0) {
                 entryPoints[entryPointName].unshift(webpackHotMiddlewareEntryPoint + webpackHotMiddlewareOptions);
             }
+
+            // Now also inject eventsource polyfill so this can work on IE/Edge (unless it's already there)
+            const eventSourcePolyfillEntryPoint = 'event-source-polyfill';
+            const entryPointsArray: string[] = entryPoints[entryPointName]; // We know by now that it's an array, because if it wasn't, we already wrapped it in one
+            if (entryPointsArray.indexOf(eventSourcePolyfillEntryPoint) < 0) {
+                const webpackHmrIndex = firstIndexOfStringStartingWith(entryPointsArray, webpackHotMiddlewareEntryPoint);
+                if (webpackHmrIndex < 0) {
+                    // This should not be possible, since we just added it if it was missing
+                    throw new Error('Cannot find ' + webpackHotMiddlewareEntryPoint + ' in entry points array: ' + entryPointsArray);
+                }
+
+                // Insert the polyfill just before the HMR entrypoint
+                entryPointsArray.splice(webpackHmrIndex, 0, eventSourcePolyfillEntryPoint);
+            }
         });
 
         webpackConfig.plugins = [].concat(webpackConfig.plugins || []); // Be sure not to mutate the original array, as it might be shared
@@ -168,3 +178,14 @@ function removeTrailingSlash(str: string) {
 function getPath(publicPath: string) {
     return url.parse(publicPath).path;
 }
+
+function firstIndexOfStringStartingWith(array: string[], prefixToFind: string) {
+    for (let index = 0; index < array.length; index++) {
+        const candidate = array[index];
+        if (candidate.substring(0, prefixToFind.length) === prefixToFind) {
+            return index;
+        }
+    }
+
+    return -1; // Not found
+}

templates/Angular2Spa/package.json

@@ -21,6 +21,7 @@
     "css": "^2.2.1",
     "css-loader": "^0.25.0",
     "es6-shim": "^0.35.1",
+    "event-source-polyfill": "^0.0.7",
     "expose-loader": "^0.7.1",
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.9.0",

templates/Angular2Spa/webpack.config.vendor.js

@@ -30,6 +30,7 @@ module.exports = {
             'bootstrap/dist/css/bootstrap.css',
             'es6-shim',
             'es6-promise',
+            'event-source-polyfill',
             'jquery',
             'zone.js',
         ]

templates/KnockoutSpa/package.json

@@ -7,6 +7,7 @@
     "bundle-loader": "^0.5.4",
     "crossroads": "^0.12.2",
     "css-loader": "^0.23.1",
+    "event-source-polyfill": "^0.0.7",
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.8.5",
     "history": "^2.0.1",

templates/KnockoutSpa/webpack.config.vendor.js

@@ -15,7 +15,7 @@ module.exports = {
         ]
     },
     entry: {
-        vendor: ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'knockout', 'crossroads', 'history', 'isomorphic-fetch', 'style-loader', 'jquery'],
+        vendor: ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'knockout', 'crossroads', 'event-source-polyfill', 'history', 'isomorphic-fetch', 'style-loader', 'jquery'],
     },
     output: {
         path: path.join(__dirname, 'wwwroot', 'dist'),

templates/ReactReduxSpa/package.json

@@ -12,6 +12,7 @@
     "bootstrap": "^3.3.6",
     "css-loader": "^0.23.1",
     "domain-task": "^2.0.0",
+    "event-source-polyfill": "^0.0.7",
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.8.5",
     "jquery": "^2.2.1",

templates/ReactReduxSpa/webpack.config.vendor.js

@@ -15,7 +15,7 @@ module.exports = {
         ]
     },
     entry: {
-        vendor: ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'domain-task', 'react', 'react-dom', 'react-router', 'redux', 'redux-thunk', 'react-router-redux', 'redux-typed', 'style-loader', 'jquery'],
+        vendor: ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'domain-task', 'event-source-polyfill', 'react', 'react-dom', 'react-router', 'redux', 'redux-thunk', 'react-router-redux', 'redux-typed', 'style-loader', 'jquery'],
     },
     output: {
         path: path.join(__dirname, 'wwwroot', 'dist'),

templates/ReactSpa/package.json

@@ -10,6 +10,7 @@
     "babel-preset-react": "^6.5.0",
     "bootstrap": "^3.3.6",
     "css-loader": "^0.23.1",
+    "event-source-polyfill": "^0.0.7",
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.8.5",
     "isomorphic-fetch": "^2.2.1",

templates/ReactSpa/webpack.config.vendor.js

@@ -15,7 +15,7 @@ module.exports = {
         ]
     },
     entry: {
-        vendor: ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'isomorphic-fetch', 'react', 'react-dom', 'react-router', 'style-loader', 'jquery'],
+        vendor: ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'event-source-polyfill', 'isomorphic-fetch', 'react', 'react-dom', 'react-router', 'style-loader', 'jquery'],
     },
     output: {
         path: path.join(__dirname, 'wwwroot', 'dist'),

templates/WebApplicationBasic/package.json

@@ -4,6 +4,7 @@
   "devDependencies": {
     "bootstrap": "^3.3.6",
     "css-loader": "^0.23.1",
+    "event-source-polyfill": "^0.0.7",
     "extendify": "^1.0.0",
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.8.5",

templates/WebApplicationBasic/webpack.config.vendor.js

@@ -15,7 +15,7 @@ module.exports = {
         ]
     },
     entry: {
-        vendor: ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'style-loader', 'jquery']
+        vendor: ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'event-source-polyfill', 'style-loader', 'jquery']
     },
     output: {
         path: path.join(__dirname, 'wwwroot', 'dist'),