Fix ie11 support with webpack 5 (#25014)

This fixes ie11 compatibility that broke in #24656 from the polyfills not being loaded first, our existing ie11 test caught this but was failing, this ensures the test is passing again. This also updates the `hrefValue` optional chaining in the eslint plugin as these files aren't transpiled and related tests were failing in azure ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added
vercel · May 12, 2021 · 9a0fc42 · 9a0fc42
1 parent 6ad9172
commit 9a0fc42
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 9 deletions.
diff --git a/packages/eslint-plugin-next/lib/rules/google-font-display.js b/packages/eslint-plugin-next/lib/rules/google-font-display.js
@@ -23,9 +23,9 @@ module.exports = {
         }
 
         const hrefValue = attributes.value('href')
-        const isGoogleFont = hrefValue?.startsWith(
-          'https://fonts.googleapis.com/css'
-        )
+        const isGoogleFont =
+          typeof hrefValue === 'string' &&
+          hrefValue.startsWith('https://fonts.googleapis.com/css')
 
         if (isGoogleFont) {
           const params = new URLSearchParams(hrefValue.split('?')[1])

diff --git a/packages/eslint-plugin-next/lib/rules/google-font-preconnect.js b/packages/eslint-plugin-next/lib/rules/google-font-preconnect.js
@@ -26,7 +26,8 @@ module.exports = {
           attributes.value('rel') !== 'preconnect'
 
         if (
-          hrefValue?.startsWith('https://fonts.gstatic.com') &&
+          typeof hrefValue === 'string' &&
+          hrefValue.startsWith('https://fonts.gstatic.com') &&
           preconnectMissing
         ) {
           context.report({

diff --git a/packages/eslint-plugin-next/lib/rules/no-page-custom-font.js b/packages/eslint-plugin-next/lib/rules/no-page-custom-font.js
@@ -38,9 +38,9 @@ module.exports = {
         }
 
         const hrefValue = attributes.value('href')
-        const isGoogleFont = hrefValue?.startsWith(
-          'https://fonts.googleapis.com/css'
-        )
+        const isGoogleFont =
+          typeof hrefValue === 'string' &&
+          hrefValue.startsWith('https://fonts.googleapis.com/css')
 
         if (isGoogleFont) {
           context.report({

diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
@@ -503,7 +503,7 @@ export default async function getBaseWebpackConfig(
       // and all other chunk depend on them so there is no
       // duplication that need to be pulled out.
       chunks: isWebpack5
-        ? (chunk) => !/^(main|pages\/_app)$/.test(chunk.name)
+        ? (chunk) => !/^(polyfills|main|pages\/_app)$/.test(chunk.name)
         : 'all',
       cacheGroups: {
         framework: {
@@ -1624,7 +1624,12 @@ export default async function getBaseWebpackConfig(
 
       if (isWebpack5 && !isServer) {
         for (const name of Object.keys(entry)) {
-          if (name === 'main' || name === 'amp' || name === 'react-refresh')
+          if (
+            name === 'polyfills' ||
+            name === 'main' ||
+            name === 'amp' ||
+            name === 'react-refresh'
+          )
             continue
           const dependOn =
             name.startsWith('pages/') && name !== 'pages/_app'