BREAKING CHANGE: Remove browsersListForSwc and change default to `l…

…egacyBrowsers: false` (#41529) Remove `browsersListForSwc` since it is enabled by default now, and disable `legacyBrowsers` by default. This PR also bumps the default browserslist to the following: - Chrome 64+ - Edge 79+ - Firefox 67+ - Opera 51+ - Safari 12+ See related RFC: - Closes #33227 Co-authored-by: JJ Kasper <[email protected]>
vercel · Oct 19, 2022 · cff9fc9 · cff9fc9
1 parent 3e2aec5
commit cff9fc9
Show file tree

Hide file tree

Showing 22 changed files with 73 additions and 98 deletions.
diff --git a/docs/basic-features/supported-browsers-features.md b/docs/basic-features/supported-browsers-features.md
@@ -4,7 +4,17 @@ description: Browser support and which JavaScript features are supported by Next
 
 # Supported Browsers and Features
 
-Next.js supports **IE11 and all modern browsers** (Edge, Firefox, Chrome, Safari, Opera, et al) with no required configuration.
+Next.js supports **modern browsers** with zero configuration.
+
+- Chrome 64+
+- Edge 79+
+- Firefox 67+
+- Opera 51+
+- Safari 12+
+
+## Browserslist
+
+If you would like to target specific browsers or features, Next.js supports [Browserslist](https://browsersl.ist) configuration.
 
 ## Polyfills
 

diff --git a/docs/upgrading.md b/docs/upgrading.md
@@ -6,6 +6,8 @@ description: Learn how to upgrade Next.js.
 
 ## Upgrading from 12 to 13
 
+The [Supported Browsers](/docs/basic-features/supported-browsers-features.md) have been changed to drop Internet Explorer and target modern browsers.
+
 The minimum Node.js version has been bumped from 12.22.0 to 14.0.0, since 12.x has reached end-of-life.
 
 The `swcMinify` configuration property was changed from `false` to `true`. See [Next.js Compiler](/docs/advanced-features/compiler.md) for more info.
@@ -15,7 +17,7 @@ A [codemod is available](/docs/advanced-features/codemods.md#next-image-to-legac
 
 The `next/link` child can no longer be `<a>`. Add the `legacyBehavior` prop to use the legacy behavior or remove the `<a>` to upgrade. A [codemod is available](/docs/advanced-features/codemods.md#new-link) to automatically upgrade your code.
 
-The `target` configuration option has been removed and superseded by [Output File Tracing](https://nextjs.org/docs/advanced-features/output-file-tracing).
+The `target` configuration property has been removed and superseded by [Output File Tracing](https://nextjs.org/docs/advanced-features/output-file-tracing).
 
 ## Upgrading to 12.2
 

diff --git a/packages/next/build/utils.ts b/packages/next/build/utils.ts
@@ -1761,8 +1761,9 @@ export function getSupportedBrowsers(
     return browsers
   }
 
-  // When user does not have browserslist use the default target
-  // When `experimental.legacyBrowsers: false` the modern default is used
+  // When the user sets `legacyBrowsers: true`, we pass undefined
+  // to SWC which is basically ES5 and matches the default behavior
+  // prior to Next.js 13
   return config.experimental.legacyBrowsers
     ? undefined
     : MODERN_BROWSERSLIST_TARGET

diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
@@ -696,9 +696,7 @@ export default async function getBaseWebpackConfig(
         fileReading: config.experimental.swcFileReading,
         nextConfig: config,
         jsConfig,
-        supportedBrowsers: config.experimental.browsersListForSwc
-          ? supportedBrowsers
-          : undefined,
+        supportedBrowsers,
         swcCacheDir: path.join(dir, config?.distDir ?? '.next', 'cache', 'swc'),
         ...extraOptions,
       },

diff --git a/packages/next/server/config-schema.ts b/packages/next/server/config-schema.ts
@@ -240,9 +240,6 @@ const configSchema = {
           },
           type: 'object',
         },
-        browsersListForSwc: {
-          type: 'boolean',
-        },
         cpus: {
           type: 'number',
         },

diff --git a/packages/next/server/config-shared.ts b/packages/next/server/config-shared.ts
@@ -84,7 +84,6 @@ export interface ExperimentalConfig {
   skipTrailingSlashRedirect?: boolean
   optimisticClientCache?: boolean
   legacyBrowsers?: boolean
-  browsersListForSwc?: boolean
   manualClientBasePath?: boolean
   newNextLinkBehavior?: boolean
   // custom path to a cache handler to use
@@ -553,9 +552,7 @@ export const defaultConfig: NextConfig = {
     optimisticClientCache: true,
     runtime: undefined,
     manualClientBasePath: false,
-    // TODO: change default in next major release (current v12.1.5)
-    legacyBrowsers: true,
-    browsersListForSwc: false,
+    legacyBrowsers: false,
     newNextLinkBehavior: true,
     cpus: Math.max(
       1,

diff --git a/packages/next/shared/lib/constants.ts b/packages/next/shared/lib/constants.ts
@@ -47,12 +47,18 @@ export const CLIENT_PUBLIC_FILES_PATH = 'public'
 export const CLIENT_STATIC_FILES_PATH = 'static'
 export const CLIENT_STATIC_FILES_RUNTIME = 'runtime'
 export const STRING_LITERAL_DROP_BUNDLE = '__NEXT_DROP_CLIENT_FILE__'
+/**
+ * These are the browser versions that support all of the following:
+ * static import: https://caniuse.com/es6-module
+ * dynamic import: https://caniuse.com/es6-module-dynamic-import
+ * import.meta: https://caniuse.com/mdn-javascript_operators_import_meta
+ */
 export const MODERN_BROWSERSLIST_TARGET = [
-  'chrome 61',
-  'edge 16',
-  'firefox 60',
-  'opera 48',
-  'safari 11',
+  'chrome 64',
+  'edge 79',
+  'firefox 67',
+  'opera 51',
+  'safari 12',
 ]
 export const NEXT_BUILTIN_DOCUMENT = '__NEXT_BUILTIN_DOCUMENT__'
 export const NEXT_CLIENT_SSR_ENTRY_SUFFIX = '.__sc_client__'

diff --git a/test/e2e/app-dir/app-alias/next.config.js b/test/e2e/app-dir/app-alias/next.config.js
@@ -1,7 +1,5 @@
 module.exports = {
   experimental: {
     appDir: true,
-    legacyBrowsers: false,
-    browsersListForSwc: true,
   },
 }
diff --git a/test/e2e/app-dir/app-edge/next.config.js b/test/e2e/app-dir/app-edge/next.config.js
@@ -1,7 +1,5 @@
 module.exports = {
   experimental: {
     appDir: true,
-    legacyBrowsers: false,
-    browsersListForSwc: true,
   },
 }
diff --git a/test/e2e/app-dir/app-prefetch/next.config.js b/test/e2e/app-dir/app-prefetch/next.config.js
@@ -1,7 +1,5 @@
 module.exports = {
   experimental: {
     appDir: true,
-    legacyBrowsers: false,
-    browsersListForSwc: true,
   },
 }
diff --git a/test/e2e/app-dir/app-static/next.config.js b/test/e2e/app-dir/app-static/next.config.js
@@ -1,8 +1,6 @@
 module.exports = {
   experimental: {
     appDir: true,
-    legacyBrowsers: false,
-    browsersListForSwc: true,
   },
   // assetPrefix: '/assets',
   rewrites: async () => {

diff --git a/test/e2e/app-dir/app/next.config.js b/test/e2e/app-dir/app/next.config.js
@@ -1,8 +1,6 @@
 module.exports = {
   experimental: {
     appDir: true,
-    legacyBrowsers: false,
-    browsersListForSwc: true,
     sri: {
       algorithm: 'sha256',
     },

diff --git a/test/e2e/app-dir/asset-prefix/next.config.js b/test/e2e/app-dir/asset-prefix/next.config.js
@@ -1,8 +1,6 @@
 module.exports = {
   experimental: {
     appDir: true,
-    legacyBrowsers: false,
-    browsersListForSwc: true,
   },
   assetPrefix: '/assets',
   rewrites() {

diff --git a/test/e2e/app-dir/next-font/next.config.js b/test/e2e/app-dir/next-font/next.config.js
@@ -1,8 +1,6 @@
 module.exports = {
   experimental: {
     appDir: true,
-    legacyBrowsers: false,
-    browsersListForSwc: true,
     fontLoaders: [
       {
         loader: '@next/font/local',

diff --git a/test/e2e/app-dir/trailingslash/next.config.js b/test/e2e/app-dir/trailingslash/next.config.js
@@ -1,8 +1,6 @@
 module.exports = {
   experimental: {
     appDir: true,
-    legacyBrowsers: false,
-    browsersListForSwc: true,
   },
   trailingSlash: true,
 }
diff --git a/test/e2e/browserslist/browserslist.test.ts b/test/e2e/browserslist/browserslist.test.ts
@@ -14,11 +14,6 @@ describe('Browserslist', () => {
         pages: new FileRef(path.join(appDir, 'pages')),
         '.browserslistrc': 'Chrome 73',
       },
-      nextConfig: {
-        experimental: {
-          browsersListForSwc: true,
-        },
-      },
       dependencies: {},
     })
   })
@@ -36,14 +31,9 @@ describe('Browserslist', () => {
           const src = $(el).attr('src')
           if (!src) return
           if (src.includes('/index')) {
-            const code = await fetchViaHTTP(next.url, src).then((res) =>
-              res.text()
-            )
-
-            const isDev = (global as any).isNextDev
-            expect(
-              code.includes(isDev ? 'async ()=>{' : 'async()=>{console.log(')
-            ).toBe(true)
+            const res = await fetchViaHTTP(next.url, src)
+            const code = await res.text()
+            expect(code).toMatch('()=>')
             finished = true
           }
         })

diff --git a/test/e2e/browserslist/legacybrowsers-false.test.ts b/test/e2e/browserslist/legacybrowsers-false.test.ts
@@ -13,18 +13,12 @@ describe('legacyBrowsers: false', () => {
       files: {
         pages: new FileRef(path.join(appDir, 'pages')),
       },
-      nextConfig: {
-        experimental: {
-          legacyBrowsers: false,
-          browsersListForSwc: true,
-        },
-      },
       dependencies: {},
     })
   })
   afterAll(() => next.destroy())
 
-  it('should apply with legacyBrowsers: false correctly', async () => {
+  it('should apply legacyBrowsers: false by default', async () => {
     const html = await renderViaHTTP(next.url, '/')
     const $ = cheerio.load(html)
 
@@ -36,14 +30,9 @@ describe('legacyBrowsers: false', () => {
           const src = $(el).attr('src')
           if (!src) return
           if (src.includes('/index')) {
-            const code = await fetchViaHTTP(next.url, src).then((res) =>
-              res.text()
-            )
-
-            const isDev = (global as any).isNextDev
-            expect(
-              code.includes(isDev ? 'async ()=>{' : 'async()=>{console.log(')
-            ).toBe(true)
+            const res = await fetchViaHTTP(next.url, src)
+            const code = await res.text()
+            expect(code).toMatch('()=>')
             finished = true
           }
         })

diff --git a/test/e2e/browserslist/legacybrowsers-true.test.ts b/test/e2e/browserslist/legacybrowsers-true.test.ts
@@ -15,15 +15,15 @@ describe('legacyBrowsers: true', () => {
       },
       nextConfig: {
         experimental: {
-          browsersListForSwc: true,
+          legacyBrowsers: true,
         },
       },
       dependencies: {},
     })
   })
   afterAll(() => next.destroy())
 
-  it('should apply legacyBrowsers: true by default', async () => {
+  it('should apply legacyBrowsers: true', async () => {
     const html = await renderViaHTTP(next.url, '/')
     const $ = cheerio.load(html)
 
@@ -35,14 +35,9 @@ describe('legacyBrowsers: true', () => {
           const src = $(el).attr('src')
           if (!src) return
           if (src.includes('/index')) {
-            const code = await fetchViaHTTP(next.url, src).then((res) =>
-              res.text()
-            )
-
-            const isDev = (global as any).isNextDev
-            expect(
-              code.includes(isDev ? 'async ()=>{' : 'async()=>{console.log(')
-            ).toBe(false)
+            const res = await fetchViaHTTP(next.url, src)
+            const code = await res.text()
+            expect(code).not.toMatch('()=>')
             finished = true
           }
         })

diff --git a/test/integration/config-experimental-warning/test/index.test.js b/test/integration/config-experimental-warning/test/index.test.js
@@ -84,14 +84,14 @@ describe('Config Experimental Warning', () => {
     configFile.write(`
       module.exports = {
         experimental: {
+          enableUndici: true,
           workerThreads: true,
-          legacyBrowsers: false,
         }
       }
     `)
     const { stderr } = await nextBuild(appDir, [], { stderr: true })
     expect(stderr).toMatch(
-      'You have enabled experimental features (workerThreads, legacyBrowsers) in next.config.js.'
+      'You have enabled experimental features (enableUndici, workerThreads) in next.config.js.'
     )
   })
 

diff --git a/test/integration/css/test/group-1.test.js b/test/integration/css/test/group-1.test.js
@@ -189,7 +189,7 @@ describe('CSS Support', () => {
       expect(
         cssContent.replace(/\/\*.*?\*\//g, '').trim()
       ).toMatchInlineSnapshot(
-        `"@media (min-width:480px) and (max-width:767px){::-moz-placeholder{color:green}:-ms-input-placeholder{color:green}::placeholder{color:green}}.flex-parsing{flex:0 0 calc(50% - var(--vertical-gutter))}.transform-parsing{transform:translate3d(0,0)}.css-grid-shorthand{grid-column:span 2}.g-docs-sidenav .filter::-webkit-input-placeholder{opacity:80%}"`
+        `"@media (min-width:480px) and (max-width:767px){::placeholder{color:green}}.flex-parsing{flex:0 0 calc(50% - var(--vertical-gutter))}.transform-parsing{transform:translate3d(0,0)}.css-grid-shorthand{grid-column:span 2}.g-docs-sidenav .filter::-webkit-input-placeholder{opacity:80%}"`
       )
 
       // Contains a source map
@@ -210,7 +210,7 @@ describe('CSS Support', () => {
       const { version, mappings, sourcesContent } = JSON.parse(cssMapContent)
       expect({ version, mappings, sourcesContent }).toMatchInlineSnapshot(`
         Object {
-          "mappings": "AAAA,+CACE,mBACE,WACF,CAFA,uBACE,WACF,CAFA,cACE,WACF,CACF,CAEA,cACE,2CACF,CAEA,mBACE,0BACF,CAEA,oBACE,kBACF,CAEA,mDACE,WACF",
+          "mappings": "AAAA,+CACE,cACE,WACF,CACF,CAEA,cACE,2CACF,CAEA,mBACE,0BACF,CAEA,oBACE,kBACF,CAEA,mDACE,WACF",
           "sourcesContent": Array [
             "@media (480px <= width < 768px) {
           ::placeholder {

diff --git a/test/integration/scss/test/group-1.test.js b/test/integration/scss/test/group-1.test.js
@@ -248,7 +248,7 @@ describe('SCSS Support', () => {
       expect(
         cssContent.replace(/\/\*.*?\*\//g, '').trim()
       ).toMatchInlineSnapshot(
-        `".redText ::-moz-placeholder{color:red}.redText :-ms-input-placeholder{color:red}.redText ::placeholder{color:red}.flex-parsing{flex:0 0 calc(50% - var(--vertical-gutter))}"`
+        `".redText ::placeholder{color:red}.flex-parsing{flex:0 0 calc(50% - var(--vertical-gutter))}"`
       )
 
       // Contains a source map
@@ -269,7 +269,7 @@ describe('SCSS Support', () => {
       const { version, mappings, sourcesContent } = JSON.parse(cssMapContent)
       expect({ version, mappings, sourcesContent }).toMatchInlineSnapshot(`
         Object {
-          "mappings": "AAEE,4BACE,SAHE,CAEJ,gCACE,SAHE,CAEJ,uBACE,SAHE,CAON,cACE,2CAAA",
+          "mappings": "AAEE,uBACE,SAHE,CAON,cACE,2CAAA",
           "sourcesContent": Array [
             "$var: red;
         .redText {