diff --git a/packages/building-utils/index-html/polyfills.js b/packages/building-utils/index-html/polyfills.js
index 02f38cb3a..e3058b33d 100644
--- a/packages/building-utils/index-html/polyfills.js
+++ b/packages/building-utils/index-html/polyfills.js
@@ -51,7 +51,7 @@ function getPolyfills(config) {
       instructions.push({
         name: 'fetch',
         test: "!('fetch' in window)",
-        path: require.resolve('whatwg-fetch/fetch.js'),
+        path: require.resolve('whatwg-fetch/dist/fetch.umd.js'),
       });
     } catch (error) {
       throw new Error(
diff --git a/packages/building-utils/test/index-html/create-index-html.test.js b/packages/building-utils/test/index-html/generate-index-html.test.js
similarity index 96%
rename from packages/building-utils/test/index-html/create-index-html.test.js
rename to packages/building-utils/test/index-html/generate-index-html.test.js
index 6e15b55ce..186bf1327 100644
--- a/packages/building-utils/test/index-html/create-index-html.test.js
+++ b/packages/building-utils/test/index-html/generate-index-html.test.js
@@ -31,15 +31,15 @@ const outputDefault =
 const outputCoreJs =
   '<html lang="en-GB"><head><title>My app</title><style>my-app{display:block}</style></head><body><h1><span>Hello world!</span></h1><my-app></my-app><script src="polyfills/core-js.79b2367fd020fda0c519294df7db91bf.js" nomodule=""></script><script src="app.js"></script></body></html>';
 const outputMultiple =
-  '<html lang="en-GB"><head><title>My app</title><style>my-app{display:block}</style><link rel="preload" href="app.js" as="script"></head><body><h1><span>Hello world!</span></h1><my-app></my-app><script src="polyfills/core-js.79b2367fd020fda0c519294df7db91bf.js" nomodule=""></script><script>!function(){function e(e){return new Promise(function(n,t){var o=document.createElement("script");o.onerror=function(){t(new Error("Error loading "+e))},o.onload=function(){n()},o.src=e,o.setAttribute("defer",!0),document.head.appendChild(o)})}var n=["app.js"],t=[];"fetch"in window||t.push(e("polyfills/fetch.95138a44bb40831d28d42e45a2bf1bc6.js")),"IntersectionObserver"in window&&"IntersectionObserverEntry"in window&&"intersectionRatio"in window.IntersectionObserverEntry.prototype||t.push(e("polyfills/intersection-observer.f670a123dee2998ae15ea330be2bea16.js")),"attachShadow"in Element.prototype&&"getRootNode"in Element.prototype||t.push(e("polyfills/webcomponents.88b4b5855ede008ecad6bbdd4a69e57d.js")),t.length?Promise.all(t).then(function(){n.forEach(function(n){e(n)})}):n.forEach(function(n){e(n)})}();</script></body></html>';
+  '<html lang="en-GB"><head><title>My app</title><style>my-app{display:block}</style><link rel="preload" href="app.js" as="script"></head><body><h1><span>Hello world!</span></h1><my-app></my-app><script src="polyfills/core-js.79b2367fd020fda0c519294df7db91bf.js" nomodule=""></script><script>!function(){function e(e){return new Promise(function(n,t){var o=document.createElement("script");o.onerror=function(){t(new Error("Error loading "+e))},o.onload=function(){n()},o.src=e,o.setAttribute("defer",!0),document.head.appendChild(o)})}var n=["app.js"],t=[];"fetch"in window||t.push(e("polyfills/fetch.25d91ed49dc86803b0aa17858b018737.js")),"IntersectionObserver"in window&&"IntersectionObserverEntry"in window&&"intersectionRatio"in window.IntersectionObserverEntry.prototype||t.push(e("polyfills/intersection-observer.f670a123dee2998ae15ea330be2bea16.js")),"attachShadow"in Element.prototype&&"getRootNode"in Element.prototype||t.push(e("polyfills/webcomponents.88b4b5855ede008ecad6bbdd4a69e57d.js")),t.length?Promise.all(t).then(function(){n.forEach(function(n){e(n)})}):n.forEach(function(n){e(n)})}();</script></body></html>';
 const outputCustom =
   '<html lang="en-GB"><head><title>My app</title><style>my-app{display:block}</style><link rel="preload" href="app.js" as="script"></head><body><h1><span>Hello world!</span></h1><my-app></my-app><script src="polyfills/custom-b.36a50cce88edee34c249d0276be6531d.js" nomodule=""></script><script>!function(){function e(e){return new Promise(function(o,n){var t=document.createElement("script");t.onerror=function(){n(new Error("Error loading "+e))},t.onload=function(){o()},t.src=e,t.setAttribute("defer",!0),document.head.appendChild(t)})}var o=["app.js"],n=[];"foo"in window&&n.push(e("polyfills/custom-a.612310cce7c28a680112cc9eff6ef77c.js")),"attachShadow"in Element.prototype&&"getRootNode"in Element.prototype||n.push(e("polyfills/webcomponents.88b4b5855ede008ecad6bbdd4a69e57d.js")),n.length?Promise.all(n).then(function(){o.forEach(function(o){e(o)})}):o.forEach(function(o){e(o)})}();</script></body></html>';
 const outputLegacy =
   '<html lang="en-GB"><head><title>My app</title><style>my-app{display:block}</style><link rel="preload" href="app.js" as="script"></head><body><h1><span>Hello world!</span></h1><my-app></my-app><script>!function(){function n(n){return new Promise(function(e,o){var r=document.createElement("script");r.onerror=function(){o(new Error("Error loading "+n))},r.onload=function(){e()},r.src=n,r.setAttribute("defer",!0),document.head.appendChild(r)})}var e="noModule"in HTMLScriptElement.prototype?["app.js"]:["legacy-app.js","legacy-shared.js"],o=[];o.length?Promise.all(o).then(function(){e.forEach(function(e){n(e)})}):e.forEach(function(e){n(e)})}();</script></body></html>';
 const outputLegacyAndPolyfills =
-  '<html lang="en-GB"><head><title>My app</title><style>my-app{display:block}</style><link rel="preload" href="app.js" as="script"></head><body><h1><span>Hello world!</span></h1><my-app></my-app><script src="polyfills/core-js.79b2367fd020fda0c519294df7db91bf.js" nomodule=""></script><script>!function(){function n(n){return new Promise(function(e,o){var t=document.createElement("script");t.onerror=function(){o(new Error("Error loading "+n))},t.onload=function(){e()},t.src=n,t.setAttribute("defer",!0),document.head.appendChild(t)})}var e="noModule"in HTMLScriptElement.prototype?["app.js"]:["legacy-app.js","legacy-shared.js"],o=[];"fetch"in window||o.push(n("polyfills/fetch.95138a44bb40831d28d42e45a2bf1bc6.js")),o.length?Promise.all(o).then(function(){e.forEach(function(e){n(e)})}):e.forEach(function(e){n(e)})}();</script></body></html>';
+  '<html lang="en-GB"><head><title>My app</title><style>my-app{display:block}</style><link rel="preload" href="app.js" as="script"></head><body><h1><span>Hello world!</span></h1><my-app></my-app><script src="polyfills/core-js.79b2367fd020fda0c519294df7db91bf.js" nomodule=""></script><script>!function(){function n(n){return new Promise(function(e,o){var t=document.createElement("script");t.onerror=function(){o(new Error("Error loading "+n))},t.onload=function(){e()},t.src=n,t.setAttribute("defer",!0),document.head.appendChild(t)})}var e="noModule"in HTMLScriptElement.prototype?["app.js"]:["legacy-app.js","legacy-shared.js"],o=[];"fetch"in window||o.push(n("polyfills/fetch.25d91ed49dc86803b0aa17858b018737.js")),o.length?Promise.all(o).then(function(){e.forEach(function(e){n(e)})}):e.forEach(function(e){n(e)})}();</script></body></html>';
 const outputExternal =
-  '<html lang="en-GB"><head><title>My app</title><style>my-app{display:block}</style><link rel="preload" href="app.js" as="script"></head><body><h1><span>Hello world!</span></h1><my-app></my-app><script src="polyfills/core-js.79b2367fd020fda0c519294df7db91bf.js" nomodule=""></script><script src="loader.567e5814f13becc7c57cf674b50fc39d.js"></script></body></html>';
+  '<html lang="en-GB"><head><title>My app</title><style>my-app{display:block}</style><link rel="preload" href="app.js" as="script"></head><body><h1><span>Hello world!</span></h1><my-app></my-app><script src="polyfills/core-js.79b2367fd020fda0c519294df7db91bf.js" nomodule=""></script><script src="loader.dc37b3a3158e3c5b9dbafddf01f74313.js"></script></body></html>';
 
 describe('generate-index-html', () => {
   it('generates a index.html based on default configuration', () => {
diff --git a/packages/building-utils/test/index-html/polyfills.test.js b/packages/building-utils/test/index-html/polyfills.test.js
index 811350e34..a8d44e91e 100644
--- a/packages/building-utils/test/index-html/polyfills.test.js
+++ b/packages/building-utils/test/index-html/polyfills.test.js
@@ -29,7 +29,7 @@ describe('polyfills', () => {
       },
       {
         code: undefined,
-        hash: '95138a44bb40831d28d42e45a2bf1bc6',
+        hash: '25d91ed49dc86803b0aa17858b018737',
         name: 'fetch',
         nomodule: false,
         sourcemap: undefined,
