From 8a14e1740b841218519a53b7fa8b82250a90a5b5 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Fri, 29 Apr 2022 22:03:14 +0200 Subject: [PATCH 1/9] Add support for browserslist and legacyBrowsers experimental option Implements #33227 - Applies browserslist to JS transforms - You don't have to use browserslist, there's also `legacyBrowsers: false` which will be the new default in Next.js 13. See #33227 for which browsers and why. ``` module.exports = { experimental: { legacyBrowsers: false } } ``` --- packages/next/build/swc/options.js | 8 +++ packages/next/build/webpack-config.ts | 19 +++++-- .../build/webpack/loaders/next-swc-loader.js | 11 +++- packages/next/server/config-shared.ts | 3 ++ packages/next/shared/lib/constants.ts | 7 +++ test/e2e/browserslist/app/pages/index.js | 22 ++++++++ test/e2e/browserslist/browserslist.test.ts | 45 ++++++++++++++++ .../browserslist/legacybrowsers-false.test.ts | 51 +++++++++++++++++++ .../browserslist/legacybrowsers-true.test.ts | 44 ++++++++++++++++ 9 files changed, 205 insertions(+), 5 deletions(-) create mode 100644 test/e2e/browserslist/app/pages/index.js create mode 100644 test/e2e/browserslist/browserslist.test.ts create mode 100644 test/e2e/browserslist/legacybrowsers-false.test.ts create mode 100644 test/e2e/browserslist/legacybrowsers-true.test.ts diff --git a/packages/next/build/swc/options.js b/packages/next/build/swc/options.js index 1347012f3aa4b..2ed9270d9ec02 100644 --- a/packages/next/build/swc/options.js +++ b/packages/next/build/swc/options.js @@ -186,6 +186,7 @@ export function getLoaderSWCOptions({ hasReactRefresh, nextConfig, jsConfig, + supportedBrowsers, // This is not passed yet as "paths" resolving is handled by webpack currently. // resolvedBaseUrl, }) { @@ -236,6 +237,13 @@ export function getLoaderSWCOptions({ isServer, pagesDir, isPageFile, + ...(supportedBrowsers && supportedBrowsers.length > 0 + ? { + env: { + targets: supportedBrowsers, + }, + } + : {}), } } } diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts index 99fce88e38b82..e45fc11831617 100644 --- a/packages/next/build/webpack-config.ts +++ b/packages/next/build/webpack-config.ts @@ -23,6 +23,7 @@ import { REACT_LOADABLE_MANIFEST, SERVERLESS_DIRECTORY, SERVER_DIRECTORY, + MODERN_BROWSERSLIST_TARGET, } from '../shared/lib/constants' import { execOnce } from '../shared/lib/utils' import { NextConfigComplete } from '../server/config-shared' @@ -60,7 +61,8 @@ const watchOptions = Object.freeze({ function getSupportedBrowsers( dir: string, - isDevelopment: boolean + isDevelopment: boolean, + config: NextConfigComplete ): string[] | undefined { let browsers: any try { @@ -69,7 +71,17 @@ function getSupportedBrowsers( env: isDevelopment ? 'development' : 'production', }) } catch {} - return browsers + + // When user has browserslist use that target + if (browsers && browsers.length > 0) { + return browsers + } + + // When user does not have browserslist use the default target + // When `experimental.legacyBrowsers: false` the modern default is used + return config.experimental.legacyBrowsers + ? undefined + : MODERN_BROWSERSLIST_TARGET } type ExcludesFalse = (x: T | false) => x is T @@ -334,7 +346,7 @@ export default async function getBaseWebpackConfig( dir, config ) - const supportedBrowsers = await getSupportedBrowsers(dir, dev) + const supportedBrowsers = await getSupportedBrowsers(dir, dev, config) const hasRewrites = rewrites.beforeFiles.length > 0 || rewrites.afterFiles.length > 0 || @@ -446,6 +458,7 @@ export default async function getBaseWebpackConfig( fileReading: config.experimental.swcFileReading, nextConfig: config, jsConfig, + supportedBrowsers, }, } : { diff --git a/packages/next/build/webpack/loaders/next-swc-loader.js b/packages/next/build/webpack/loaders/next-swc-loader.js index f027c09b6e12c..f19b8039ebc22 100644 --- a/packages/next/build/webpack/loaders/next-swc-loader.js +++ b/packages/next/build/webpack/loaders/next-swc-loader.js @@ -36,8 +36,14 @@ async function loaderTransform(parentTrace, source, inputSourceMap) { let loaderOptions = this.getOptions() || {} - const { isServer, pagesDir, hasReactRefresh, nextConfig, jsConfig } = - loaderOptions + const { + isServer, + pagesDir, + hasReactRefresh, + nextConfig, + jsConfig, + supportedBrowsers, + } = loaderOptions const isPageFile = filename.startsWith(pagesDir) const swcOptions = getLoaderSWCOptions({ @@ -49,6 +55,7 @@ async function loaderTransform(parentTrace, source, inputSourceMap) { hasReactRefresh, nextConfig, jsConfig, + supportedBrowsers, }) const programmaticOptions = { diff --git a/packages/next/server/config-shared.ts b/packages/next/server/config-shared.ts index e6a783bfee393..72e3da25067a2 100644 --- a/packages/next/server/config-shared.ts +++ b/packages/next/server/config-shared.ts @@ -78,6 +78,7 @@ export interface NextJsWebpackConfig { } export interface ExperimentalConfig { + legacyBrowsers?: boolean newNextLinkBehavior?: boolean disablePostcssPresetEnv?: boolean swcMinify?: boolean @@ -467,6 +468,8 @@ export const defaultConfig: NextConfig = { staticPageGenerationTimeout: 60, swcMinify: false, experimental: { + // TODO: change default in next major release (current v12.1.5) + legacyBrowsers: true, // TODO: change default in next major release (current v12.1.5) newNextLinkBehavior: false, cpus: Math.max( diff --git a/packages/next/shared/lib/constants.ts b/packages/next/shared/lib/constants.ts index bedca6446bb5e..15463dab540b5 100644 --- a/packages/next/shared/lib/constants.ts +++ b/packages/next/shared/lib/constants.ts @@ -25,6 +25,13 @@ 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__' +export const MODERN_BROWSERSLIST_TARGET = [ + 'chrome 61', + 'edge 16', + 'firefox 60', + 'opera 48', + 'safari 11', +] // server/middleware-flight-manifest.js export const MIDDLEWARE_FLIGHT_MANIFEST = 'middleware-flight-manifest' diff --git a/test/e2e/browserslist/app/pages/index.js b/test/e2e/browserslist/app/pages/index.js new file mode 100644 index 0000000000000..9ca5396adef99 --- /dev/null +++ b/test/e2e/browserslist/app/pages/index.js @@ -0,0 +1,22 @@ +import React, { useEffect } from 'react' +const helloWorld = 'hello world' + +class MyComp extends React.Component { + render() { + return

Hello World

+ } +} + +export default function Page() { + useEffect(() => { + ;(async () => { + console.log(helloWorld) + })() + }, []) + return ( +

+ {helloWorld} + +

+ ) +} diff --git a/test/e2e/browserslist/browserslist.test.ts b/test/e2e/browserslist/browserslist.test.ts new file mode 100644 index 0000000000000..03d813e230371 --- /dev/null +++ b/test/e2e/browserslist/browserslist.test.ts @@ -0,0 +1,45 @@ +import { createNext, FileRef } from 'e2e-utils' +import { NextInstance } from 'test/lib/next-modes/base' +import { renderViaHTTP } from 'next-test-utils' +import path from 'path' +import cheerio from 'cheerio' +import fetch from 'node-fetch' +const appDir = path.join(__dirname, 'app') + +describe('Browserslist', () => { + let next: NextInstance + + beforeAll(async () => { + next = await createNext({ + files: { + pages: new FileRef(path.join(appDir, 'pages')), + '.browserslistrc': 'Chrome 73', + }, + dependencies: {}, + }) + }) + afterAll(() => next.destroy()) + + it('should apply browserslist target', async () => { + const html = await renderViaHTTP(next.url, '/') + const $ = cheerio.load(html) + + let finished = false + await Promise.all( + $('script') + .toArray() + .map(async (el) => { + const src = $(el).attr('src') + if (!src) return + if (src.includes('index-')) { + const source = next.url + src + const code = await fetch(source).then((res) => res.text()) + + expect(code.includes('async()=>{console.log(')).toBe(true) + finished = true + } + }) + ) + expect(finished).toBe(true) + }) +}) diff --git a/test/e2e/browserslist/legacybrowsers-false.test.ts b/test/e2e/browserslist/legacybrowsers-false.test.ts new file mode 100644 index 0000000000000..3deff90ce2a1f --- /dev/null +++ b/test/e2e/browserslist/legacybrowsers-false.test.ts @@ -0,0 +1,51 @@ +import { createNext, FileRef } from 'e2e-utils' +import { NextInstance } from 'test/lib/next-modes/base' +import { renderViaHTTP } from 'next-test-utils' +import path from 'path' +import cheerio from 'cheerio' +import fetch from 'node-fetch' +const appDir = path.join(__dirname, 'app') + +describe('legacyBrowsers: false', () => { + let next: NextInstance + + beforeAll(async () => { + next = await createNext({ + files: { + pages: new FileRef(path.join(appDir, 'pages')), + 'next.config.js': ` + module.exports = { + experimental: { + legacyBrowsers: false + } + } + `, + }, + dependencies: {}, + }) + }) + afterAll(() => next.destroy()) + + it('should apply legacyBrowsers: true by default', async () => { + const html = await renderViaHTTP(next.url, '/') + const $ = cheerio.load(html) + + let finished = false + await Promise.all( + $('script') + .toArray() + .map(async (el) => { + const src = $(el).attr('src') + if (!src) return + if (src.includes('index-')) { + const source = next.url + src + const code = await fetch(source).then((res) => res.text()) + + expect(code.includes('async()=>{console.log(')).toBe(true) + finished = true + } + }) + ) + expect(finished).toBe(true) + }) +}) diff --git a/test/e2e/browserslist/legacybrowsers-true.test.ts b/test/e2e/browserslist/legacybrowsers-true.test.ts new file mode 100644 index 0000000000000..57f92053e9044 --- /dev/null +++ b/test/e2e/browserslist/legacybrowsers-true.test.ts @@ -0,0 +1,44 @@ +import { createNext, FileRef } from 'e2e-utils' +import { NextInstance } from 'test/lib/next-modes/base' +import { renderViaHTTP } from 'next-test-utils' +import path from 'path' +import cheerio from 'cheerio' +import fetch from 'node-fetch' +const appDir = path.join(__dirname, 'app') + +describe('legacyBrowsers: true', () => { + let next: NextInstance + + beforeAll(async () => { + next = await createNext({ + files: { + pages: new FileRef(path.join(appDir, 'pages')), + }, + dependencies: {}, + }) + }) + afterAll(() => next.destroy()) + + it('should apply legacyBrowsers: true by default', async () => { + const html = await renderViaHTTP(next.url, '/') + const $ = cheerio.load(html) + + let finished = false + await Promise.all( + $('script') + .toArray() + .map(async (el) => { + const src = $(el).attr('src') + if (!src) return + if (src.includes('index-')) { + const source = next.url + src + const code = await fetch(source).then((res) => res.text()) + + expect(code.includes('async()=>{console.log(')).toBe(false) + finished = true + } + }) + ) + expect(finished).toBe(true) + }) +}) From 8790f3cae4b6e9fbffff10a4fdc4f0d462c30bcb Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Sat, 30 Apr 2022 15:51:06 +0200 Subject: [PATCH 2/9] Handle loading of extends --- packages/next/build/webpack-config.ts | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts index e45fc11831617..2976d62e020e4 100644 --- a/packages/next/build/webpack-config.ts +++ b/packages/next/build/webpack-config.ts @@ -66,10 +66,13 @@ function getSupportedBrowsers( ): string[] | undefined { let browsers: any try { - browsers = browserslist.loadConfig({ - path: dir, - env: isDevelopment ? 'development' : 'production', - }) + // Running `browserslist` resolves `extends` and other config features into a list of browsers + browsers = browserslist( + browserslist.loadConfig({ + path: dir, + env: isDevelopment ? 'development' : 'production', + }) + ) } catch {} // When user has browserslist use that target @@ -347,6 +350,7 @@ export default async function getBaseWebpackConfig( config ) const supportedBrowsers = await getSupportedBrowsers(dir, dev, config) + const hasRewrites = rewrites.beforeFiles.length > 0 || rewrites.afterFiles.length > 0 || From e0e74f77be45d28b7104faf3674614d69155f822 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Sat, 30 Apr 2022 21:21:47 +0200 Subject: [PATCH 3/9] Fix default of no custom browserslist config --- packages/next/build/webpack-config.ts | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts index 2976d62e020e4..3ff8200e47666 100644 --- a/packages/next/build/webpack-config.ts +++ b/packages/next/build/webpack-config.ts @@ -66,13 +66,14 @@ function getSupportedBrowsers( ): string[] | undefined { let browsers: any try { + const browsersListConfig = browserslist.loadConfig({ + path: dir, + env: isDevelopment ? 'development' : 'production', + }) // Running `browserslist` resolves `extends` and other config features into a list of browsers - browsers = browserslist( - browserslist.loadConfig({ - path: dir, - env: isDevelopment ? 'development' : 'production', - }) - ) + if (browsersListConfig && browsersListConfig.length > 0) { + browsers = browserslist(browsersListConfig) + } } catch {} // When user has browserslist use that target From 375e06898248e961f7face1bba7dfaa4fe53fbd2 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Sat, 30 Apr 2022 22:21:56 +0200 Subject: [PATCH 4/9] Fix test case for development and handle cache invalidation when flag is switched --- packages/next/build/webpack-config.ts | 1 + test/e2e/browserslist/app/next.config.js | 5 +++++ test/e2e/browserslist/app/pages/index.js | 4 ++-- test/e2e/browserslist/browserslist.test.ts | 7 +++++-- test/e2e/browserslist/legacybrowsers-false.test.ts | 7 +++++-- test/e2e/browserslist/legacybrowsers-true.test.ts | 7 +++++-- 6 files changed, 23 insertions(+), 8 deletions(-) create mode 100644 test/e2e/browserslist/app/next.config.js diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts index 3ff8200e47666..83e142f81405e 100644 --- a/packages/next/build/webpack-config.ts +++ b/packages/next/build/webpack-config.ts @@ -1722,6 +1722,7 @@ export default async function getBaseWebpackConfig( relay: config.compiler?.relay, emotion: config.experimental?.emotion, modularizeImports: config.experimental?.modularizeImports, + legacyBrowsers: config.experimental?.legacyBrowsers, }) const cache: any = { diff --git a/test/e2e/browserslist/app/next.config.js b/test/e2e/browserslist/app/next.config.js new file mode 100644 index 0000000000000..348efffcd654f --- /dev/null +++ b/test/e2e/browserslist/app/next.config.js @@ -0,0 +1,5 @@ +module.exports = { + experimental: { + legacyBrowsers: false, + }, +} diff --git a/test/e2e/browserslist/app/pages/index.js b/test/e2e/browserslist/app/pages/index.js index 9ca5396adef99..5a2db92580e64 100644 --- a/test/e2e/browserslist/app/pages/index.js +++ b/test/e2e/browserslist/app/pages/index.js @@ -14,9 +14,9 @@ export default function Page() { })() }, []) return ( -

+ <> {helloWorld} -

+ ) } diff --git a/test/e2e/browserslist/browserslist.test.ts b/test/e2e/browserslist/browserslist.test.ts index 03d813e230371..ca8d528104f35 100644 --- a/test/e2e/browserslist/browserslist.test.ts +++ b/test/e2e/browserslist/browserslist.test.ts @@ -31,11 +31,14 @@ describe('Browserslist', () => { .map(async (el) => { const src = $(el).attr('src') if (!src) return - if (src.includes('index-')) { + if (src.includes('/index')) { const source = next.url + src const code = await fetch(source).then((res) => res.text()) - expect(code.includes('async()=>{console.log(')).toBe(true) + const isDev = (global as any).isNextDev + expect( + code.includes(isDev ? 'async ()=>{' : 'async()=>{console.log(') + ).toBe(true) finished = true } }) diff --git a/test/e2e/browserslist/legacybrowsers-false.test.ts b/test/e2e/browserslist/legacybrowsers-false.test.ts index 3deff90ce2a1f..d1bbd9056e186 100644 --- a/test/e2e/browserslist/legacybrowsers-false.test.ts +++ b/test/e2e/browserslist/legacybrowsers-false.test.ts @@ -37,11 +37,14 @@ describe('legacyBrowsers: false', () => { .map(async (el) => { const src = $(el).attr('src') if (!src) return - if (src.includes('index-')) { + if (src.includes('/index')) { const source = next.url + src const code = await fetch(source).then((res) => res.text()) - expect(code.includes('async()=>{console.log(')).toBe(true) + const isDev = (global as any).isNextDev + expect( + code.includes(isDev ? 'async ()=>{' : 'async()=>{console.log(') + ).toBe(true) finished = true } }) diff --git a/test/e2e/browserslist/legacybrowsers-true.test.ts b/test/e2e/browserslist/legacybrowsers-true.test.ts index 57f92053e9044..2a5c43faebc1e 100644 --- a/test/e2e/browserslist/legacybrowsers-true.test.ts +++ b/test/e2e/browserslist/legacybrowsers-true.test.ts @@ -30,11 +30,14 @@ describe('legacyBrowsers: true', () => { .map(async (el) => { const src = $(el).attr('src') if (!src) return - if (src.includes('index-')) { + if (src.includes('/index')) { const source = next.url + src const code = await fetch(source).then((res) => res.text()) - expect(code.includes('async()=>{console.log(')).toBe(false) + const isDev = (global as any).isNextDev + expect( + code.includes(isDev ? 'async ()=>{' : 'async()=>{console.log(') + ).toBe(false) finished = true } }) From 92648fb55828e88421a8cac848d2a1ed86443e54 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Sun, 1 May 2022 10:40:53 +0200 Subject: [PATCH 5/9] Remove next.config.js --- test/e2e/browserslist/app/next.config.js | 5 ----- 1 file changed, 5 deletions(-) delete mode 100644 test/e2e/browserslist/app/next.config.js diff --git a/test/e2e/browserslist/app/next.config.js b/test/e2e/browserslist/app/next.config.js deleted file mode 100644 index 348efffcd654f..0000000000000 --- a/test/e2e/browserslist/app/next.config.js +++ /dev/null @@ -1,5 +0,0 @@ -module.exports = { - experimental: { - legacyBrowsers: false, - }, -} From cc3b557004327fcf294b583b2c67efdcb2754f02 Mon Sep 17 00:00:00 2001 From: JJ Kasper Date: Sun, 1 May 2022 10:50:07 -0500 Subject: [PATCH 6/9] update fetch --- test/e2e/browserslist/browserslist.test.ts | 8 ++++---- test/e2e/browserslist/legacybrowsers-false.test.ts | 8 ++++---- test/e2e/browserslist/legacybrowsers-true.test.ts | 8 ++++---- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/test/e2e/browserslist/browserslist.test.ts b/test/e2e/browserslist/browserslist.test.ts index ca8d528104f35..4d7f12c8328be 100644 --- a/test/e2e/browserslist/browserslist.test.ts +++ b/test/e2e/browserslist/browserslist.test.ts @@ -1,9 +1,8 @@ import { createNext, FileRef } from 'e2e-utils' import { NextInstance } from 'test/lib/next-modes/base' -import { renderViaHTTP } from 'next-test-utils' +import { renderViaHTTP, fetchViaHTTP } from 'next-test-utils' import path from 'path' import cheerio from 'cheerio' -import fetch from 'node-fetch' const appDir = path.join(__dirname, 'app') describe('Browserslist', () => { @@ -32,8 +31,9 @@ describe('Browserslist', () => { const src = $(el).attr('src') if (!src) return if (src.includes('/index')) { - const source = next.url + src - const code = await fetch(source).then((res) => res.text()) + const code = await fetchViaHTTP(next.url, src).then((res) => + res.text() + ) const isDev = (global as any).isNextDev expect( diff --git a/test/e2e/browserslist/legacybrowsers-false.test.ts b/test/e2e/browserslist/legacybrowsers-false.test.ts index d1bbd9056e186..16c80e4c89d4d 100644 --- a/test/e2e/browserslist/legacybrowsers-false.test.ts +++ b/test/e2e/browserslist/legacybrowsers-false.test.ts @@ -1,9 +1,8 @@ import { createNext, FileRef } from 'e2e-utils' import { NextInstance } from 'test/lib/next-modes/base' -import { renderViaHTTP } from 'next-test-utils' +import { renderViaHTTP, fetchViaHTTP } from 'next-test-utils' import path from 'path' import cheerio from 'cheerio' -import fetch from 'node-fetch' const appDir = path.join(__dirname, 'app') describe('legacyBrowsers: false', () => { @@ -38,8 +37,9 @@ describe('legacyBrowsers: false', () => { const src = $(el).attr('src') if (!src) return if (src.includes('/index')) { - const source = next.url + src - const code = await fetch(source).then((res) => res.text()) + const code = await fetchViaHTTP(next.url, src).then((res) => + res.text() + ) const isDev = (global as any).isNextDev expect( diff --git a/test/e2e/browserslist/legacybrowsers-true.test.ts b/test/e2e/browserslist/legacybrowsers-true.test.ts index 2a5c43faebc1e..7c62446e428a5 100644 --- a/test/e2e/browserslist/legacybrowsers-true.test.ts +++ b/test/e2e/browserslist/legacybrowsers-true.test.ts @@ -1,9 +1,8 @@ import { createNext, FileRef } from 'e2e-utils' import { NextInstance } from 'test/lib/next-modes/base' -import { renderViaHTTP } from 'next-test-utils' +import { renderViaHTTP, fetchViaHTTP } from 'next-test-utils' import path from 'path' import cheerio from 'cheerio' -import fetch from 'node-fetch' const appDir = path.join(__dirname, 'app') describe('legacyBrowsers: true', () => { @@ -31,8 +30,9 @@ describe('legacyBrowsers: true', () => { const src = $(el).attr('src') if (!src) return if (src.includes('/index')) { - const source = next.url + src - const code = await fetch(source).then((res) => res.text()) + const code = await fetchViaHTTP(next.url, src).then((res) => + res.text() + ) const isDev = (global as any).isNextDev expect( From 3851ddf2a31c7a4934e39a3aa0435d756b452249 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Mon, 16 May 2022 15:11:05 +0200 Subject: [PATCH 7/9] Make browsersList support with SWC experimental --- packages/next/build/webpack-config.ts | 4 +++- packages/next/server/config-shared.ts | 4 +++- test/e2e/browserslist/browserslist.test.ts | 5 +++++ 3 files changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts index 3d5135eef75d0..eb2c76523fe69 100644 --- a/packages/next/build/webpack-config.ts +++ b/packages/next/build/webpack-config.ts @@ -483,7 +483,9 @@ export default async function getBaseWebpackConfig( fileReading: config.experimental.swcFileReading, nextConfig: config, jsConfig, - supportedBrowsers, + supportedBrowsers: config.experimental.browsersListForSwc + ? supportedBrowsers + : undefined, }, } : { diff --git a/packages/next/server/config-shared.ts b/packages/next/server/config-shared.ts index 12953cb1bb55d..074fadff3cbf7 100644 --- a/packages/next/server/config-shared.ts +++ b/packages/next/server/config-shared.ts @@ -79,7 +79,8 @@ export interface NextJsWebpackConfig { } export interface ExperimentalConfig { - legacyBrowsers?: boolean + legacyBrowsers?: true + browsersListForSwc?: boolean manualClientBasePath?: boolean newNextLinkBehavior?: boolean disablePostcssPresetEnv?: boolean @@ -476,6 +477,7 @@ export const defaultConfig: NextConfig = { experimental: { // TODO: change default in next major release (current v12.1.5) legacyBrowsers: true, + browsersListForSwc: false, // TODO: change default in next major release (current v12.1.5) newNextLinkBehavior: false, cpus: Math.max( diff --git a/test/e2e/browserslist/browserslist.test.ts b/test/e2e/browserslist/browserslist.test.ts index 4d7f12c8328be..cbd93eee1dda3 100644 --- a/test/e2e/browserslist/browserslist.test.ts +++ b/test/e2e/browserslist/browserslist.test.ts @@ -14,6 +14,11 @@ describe('Browserslist', () => { pages: new FileRef(path.join(appDir, 'pages')), '.browserslistrc': 'Chrome 73', }, + nextConfig: { + experimental: { + browsersListForSwc: true, + }, + }, dependencies: {}, }) }) From 1e2b881e4ce774a87a82183a4d13aad4fecb9068 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Mon, 16 May 2022 15:18:03 +0200 Subject: [PATCH 8/9] Make browsersList support with SWC experimental --- packages/next/server/config-shared.ts | 2 +- test/e2e/browserslist/legacybrowsers-false.test.ts | 13 ++++++------- test/e2e/browserslist/legacybrowsers-true.test.ts | 5 +++++ 3 files changed, 12 insertions(+), 8 deletions(-) diff --git a/packages/next/server/config-shared.ts b/packages/next/server/config-shared.ts index 074fadff3cbf7..ca01d6194fb26 100644 --- a/packages/next/server/config-shared.ts +++ b/packages/next/server/config-shared.ts @@ -79,7 +79,7 @@ export interface NextJsWebpackConfig { } export interface ExperimentalConfig { - legacyBrowsers?: true + legacyBrowsers?: boolean browsersListForSwc?: boolean manualClientBasePath?: boolean newNextLinkBehavior?: boolean diff --git a/test/e2e/browserslist/legacybrowsers-false.test.ts b/test/e2e/browserslist/legacybrowsers-false.test.ts index 16c80e4c89d4d..6f68552833aaa 100644 --- a/test/e2e/browserslist/legacybrowsers-false.test.ts +++ b/test/e2e/browserslist/legacybrowsers-false.test.ts @@ -12,13 +12,12 @@ describe('legacyBrowsers: false', () => { next = await createNext({ files: { pages: new FileRef(path.join(appDir, 'pages')), - 'next.config.js': ` - module.exports = { - experimental: { - legacyBrowsers: false - } - } - `, + }, + nextConfig: { + experimental: { + legacyBrowsers: false, + browsersListForSwc: true, + }, }, dependencies: {}, }) diff --git a/test/e2e/browserslist/legacybrowsers-true.test.ts b/test/e2e/browserslist/legacybrowsers-true.test.ts index 7c62446e428a5..ec397bafcb256 100644 --- a/test/e2e/browserslist/legacybrowsers-true.test.ts +++ b/test/e2e/browserslist/legacybrowsers-true.test.ts @@ -13,6 +13,11 @@ describe('legacyBrowsers: true', () => { files: { pages: new FileRef(path.join(appDir, 'pages')), }, + nextConfig: { + experimental: { + browsersListForSwc: true, + }, + }, dependencies: {}, }) }) From c6eeb267a8b654c71fd11546238941baf35a2411 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 17 May 2022 15:54:08 +0200 Subject: [PATCH 9/9] Update test/e2e/browserslist/legacybrowsers-false.test.ts Co-authored-by: JJ Kasper --- test/e2e/browserslist/legacybrowsers-false.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/browserslist/legacybrowsers-false.test.ts b/test/e2e/browserslist/legacybrowsers-false.test.ts index 6f68552833aaa..023ba6db26dab 100644 --- a/test/e2e/browserslist/legacybrowsers-false.test.ts +++ b/test/e2e/browserslist/legacybrowsers-false.test.ts @@ -24,7 +24,7 @@ describe('legacyBrowsers: false', () => { }) afterAll(() => next.destroy()) - it('should apply legacyBrowsers: true by default', async () => { + it('should apply with legacyBrowsers: false correctly', async () => { const html = await renderViaHTTP(next.url, '/') const $ = cheerio.load(html)