From b25340c1fb091b838ca3cac46fc1454e00b6452d Mon Sep 17 00:00:00 2001 From: Maia Teegarden Date: Mon, 7 Feb 2022 13:27:50 -0800 Subject: [PATCH 01/21] Make relay a stable compiler option --- docs/advanced-features/compiler.md | 44 ++++++++++++++------------- packages/next/build/webpack-config.ts | 2 +- packages/next/server/config-shared.ts | 18 ++++++++--- 3 files changed, 37 insertions(+), 27 deletions(-) diff --git a/docs/advanced-features/compiler.md b/docs/advanced-features/compiler.md index 9e1549972178c..7f66a6866f3ea 100644 --- a/docs/advanced-features/compiler.md +++ b/docs/advanced-features/compiler.md @@ -30,7 +30,7 @@ We chose to build on SWC for a few reasons: - **WebAssembly:** Rust's support for WASM is essential for supporting all possible platforms and taking Next.js development everywhere. - **Community:** The Rust community and ecosystem are amazing and still growing. -## Experimental Features +## Supported Features ### Minification @@ -46,6 +46,28 @@ module.exports = { If you have feedback about `swcMinify`, please share it on the [feedback discussion](https://github.com/vercel/next.js/discussions/30237). +### Relay + +To enable [Relay](https://relay.dev/) support: + +```js +// next.config.js +module.exports = { + experimental: { + relay: { + // This should match relay.config.js + src: './', + artifactDirectory: './__generated__', + language: 'typescript', + }, + }, +} +``` + +NOTE: In Next.js all JavaScript files in `pages` directory are considered routes. So, for `relay-compiler` you'll need to specify `artifactDirectory` configuration settings outside of the `pages`, otherwise `relay-compiler` will generate files next to the source file in the `__generated__` directory, and this file will be considered a route, which will break production builds. + +## Experimental Features + ### Styled Components We're working to port `babel-plugin-styled-components` to the Next.js Compiler. @@ -94,26 +116,6 @@ const customJestConfig = { module.exports = createJestConfig(customJestConfig) ``` -### Relay - -To enable [Relay](https://relay.dev/) support: - -```js -// next.config.js -module.exports = { - experimental: { - relay: { - // This should match relay.config.js - src: './', - artifactDirectory: './__generated__', - language: 'typescript', - }, - }, -} -``` - -NOTE: In Next.js all JavaScript files in `pages` directory are considered routes. So, for `relay-compiler` you'll need to specify `artifactDirectory` configuration settings outside of the `pages`, otherwise `relay-compiler` will generate files next to the source file in the `__generated__` directory, and this file will be considered a route, which will break production builds. - ### Remove React Properties Allows to remove JSX properties. This is often used for testing. Similar to `babel-plugin-react-remove-properties`. diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts index 6a16a2cf65f3b..174e05f0a3ef8 100644 --- a/packages/next/build/webpack-config.ts +++ b/packages/next/build/webpack-config.ts @@ -1618,7 +1618,7 @@ export default async function getBaseWebpackConfig( removeConsole: config.experimental.removeConsole, reactRemoveProperties: config.experimental.reactRemoveProperties, styledComponents: config.experimental.styledComponents, - relay: config.experimental.relay, + relay: config.compiler.relay, }) const cache: any = { diff --git a/packages/next/server/config-shared.ts b/packages/next/server/config-shared.ts index 8c6270666a26c..e8a47092acde9 100644 --- a/packages/next/server/config-shared.ts +++ b/packages/next/server/config-shared.ts @@ -118,11 +118,6 @@ export interface ExperimentalConfig { urlImports?: NonNullable['buildHttp'] outputFileTracingRoot?: string outputStandalone?: boolean - relay?: { - src: string - artifactDirectory?: string - language?: 'typescript' | 'flow' - } } /** @@ -376,6 +371,19 @@ export interface NextConfig extends Record { */ swcMinify?: boolean + /** + * Optionally enable compiler transforms + * + * @see [Supported Compiler Options](https://nextjs.org/docs/advanced-features/compiler#supported-features) + */ + compiler?: { + relay?: { + src: string + artifactDirectory?: string + language?: 'typescript' | 'flow' + } + } + /** * Enable experimental features. Note that all experimental features are subject to breaking changes in the future. */ From d3fbea93059fe518c410a6068ed6dfd8ccbba586 Mon Sep 17 00:00:00 2001 From: Maia Teegarden Date: Mon, 7 Feb 2022 13:43:04 -0800 Subject: [PATCH 02/21] Make styledComponents a stable compiler option --- docs/advanced-features/compiler.md | 38 +++++++++++++-------------- packages/next/build/webpack-config.ts | 2 +- packages/next/server/config-shared.ts | 7 +---- 3 files changed, 21 insertions(+), 26 deletions(-) diff --git a/docs/advanced-features/compiler.md b/docs/advanced-features/compiler.md index 7f66a6866f3ea..0df467b7dc9de 100644 --- a/docs/advanced-features/compiler.md +++ b/docs/advanced-features/compiler.md @@ -46,46 +46,46 @@ module.exports = { If you have feedback about `swcMinify`, please share it on the [feedback discussion](https://github.com/vercel/next.js/discussions/30237). -### Relay +### Styled Components -To enable [Relay](https://relay.dev/) support: +We're working to port `babel-plugin-styled-components` to the Next.js Compiler. + +First, update to the latest version of Next.js: `npm install next@latest`. Then, update your `next.config.js` file: ```js // next.config.js + module.exports = { experimental: { - relay: { - // This should match relay.config.js - src: './', - artifactDirectory: './__generated__', - language: 'typescript', - }, + // ssr and displayName are configured by default + styledComponents: true, }, } ``` -NOTE: In Next.js all JavaScript files in `pages` directory are considered routes. So, for `relay-compiler` you'll need to specify `artifactDirectory` configuration settings outside of the `pages`, otherwise `relay-compiler` will generate files next to the source file in the `__generated__` directory, and this file will be considered a route, which will break production builds. - -## Experimental Features - -### Styled Components +Currently, only the `ssr` and `displayName` transforms have been implemented. These two transforms are the main requirement for using `styled-components` in Next.js. -We're working to port `babel-plugin-styled-components` to the Next.js Compiler. +### Relay -First, update to the latest version of Next.js: `npm install next@latest`. Then, update your `next.config.js` file: +To enable [Relay](https://relay.dev/) support: ```js // next.config.js - module.exports = { experimental: { - // ssr and displayName are configured by default - styledComponents: true, + relay: { + // This should match relay.config.js + src: './', + artifactDirectory: './__generated__', + language: 'typescript', + }, }, } ``` -Currently, only the `ssr` and `displayName` transforms have been implemented. These two transforms are the main requirement for using `styled-components` in Next.js. +NOTE: In Next.js all JavaScript files in `pages` directory are considered routes. So, for `relay-compiler` you'll need to specify `artifactDirectory` configuration settings outside of the `pages`, otherwise `relay-compiler` will generate files next to the source file in the `__generated__` directory, and this file will be considered a route, which will break production builds. + +## Experimental Features ### Jest diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts index 174e05f0a3ef8..5f85145214328 100644 --- a/packages/next/build/webpack-config.ts +++ b/packages/next/build/webpack-config.ts @@ -1617,7 +1617,7 @@ export default async function getBaseWebpackConfig( swcLoader: useSWCLoader, removeConsole: config.experimental.removeConsole, reactRemoveProperties: config.experimental.reactRemoveProperties, - styledComponents: config.experimental.styledComponents, + styledComponents: config.compiler.styledComponents, relay: config.compiler.relay, }) diff --git a/packages/next/server/config-shared.ts b/packages/next/server/config-shared.ts index e8a47092acde9..c614c4816fb3a 100644 --- a/packages/next/server/config-shared.ts +++ b/packages/next/server/config-shared.ts @@ -80,12 +80,6 @@ export interface ExperimentalConfig { | { exclude?: string[] } - reactRemoveProperties?: - | boolean - | { - properties?: string[] - } - styledComponents?: boolean swcMinify?: boolean swcFileReading?: boolean cpus?: number @@ -382,6 +376,7 @@ export interface NextConfig extends Record { artifactDirectory?: string language?: 'typescript' | 'flow' } + styledComponents?: boolean } /** From 552adf0ae82e40c1f943248f6dd5e34d8ff916b0 Mon Sep 17 00:00:00 2001 From: Maia Teegarden Date: Mon, 7 Feb 2022 13:50:19 -0800 Subject: [PATCH 03/21] Make reactRemoveProperties stable compiler option --- docs/advanced-features/compiler.md | 56 +++++++++++++-------------- packages/next/build/webpack-config.ts | 2 +- packages/next/server/config-shared.ts | 5 +++ 3 files changed, 34 insertions(+), 29 deletions(-) diff --git a/docs/advanced-features/compiler.md b/docs/advanced-features/compiler.md index 0df467b7dc9de..4e3c3fd49943a 100644 --- a/docs/advanced-features/compiler.md +++ b/docs/advanced-features/compiler.md @@ -85,6 +85,34 @@ module.exports = { NOTE: In Next.js all JavaScript files in `pages` directory are considered routes. So, for `relay-compiler` you'll need to specify `artifactDirectory` configuration settings outside of the `pages`, otherwise `relay-compiler` will generate files next to the source file in the `__generated__` directory, and this file will be considered a route, which will break production builds. +### Remove React Properties + +Allows to remove JSX properties. This is often used for testing. Similar to `babel-plugin-react-remove-properties`. + +To remove properties matching the default regex `^data-test`: + +```js +// next.config.js +module.exports = { + experimental: { + reactRemoveProperties: true, + }, +} +``` + +To remove custom properties: + +```js +// next.config.js +module.exports = { + experimental: { + // The regexes defined here are processed in Rust so the syntax is different from + // JavaScript `RegExp`s. See https://docs.rs/regex. + reactRemoveProperties: { properties: ['^data-custom$'] }, + }, +} +``` + ## Experimental Features ### Jest @@ -116,34 +144,6 @@ const customJestConfig = { module.exports = createJestConfig(customJestConfig) ``` -### Remove React Properties - -Allows to remove JSX properties. This is often used for testing. Similar to `babel-plugin-react-remove-properties`. - -To remove properties matching the default regex `^data-test`: - -```js -// next.config.js -module.exports = { - experimental: { - reactRemoveProperties: true, - }, -} -``` - -To remove custom properties: - -```js -// next.config.js -module.exports = { - experimental: { - // The regexes defined here are processed in Rust so the syntax is different from - // JavaScript `RegExp`s. See https://docs.rs/regex. - reactRemoveProperties: { properties: ['^data-custom$'] }, - }, -} -``` - ### Legacy Decorators Next.js will automatically detect `experimentalDecorators` in `jsconfig.json` or `tsconfig.json` and apply that. This is commonly used with older versions of libraries like `mobx`. diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts index 5f85145214328..459968278c704 100644 --- a/packages/next/build/webpack-config.ts +++ b/packages/next/build/webpack-config.ts @@ -1616,7 +1616,7 @@ export default async function getBaseWebpackConfig( swcMinify: config.swcMinify, swcLoader: useSWCLoader, removeConsole: config.experimental.removeConsole, - reactRemoveProperties: config.experimental.reactRemoveProperties, + reactRemoveProperties: config.compiler.reactRemoveProperties, styledComponents: config.compiler.styledComponents, relay: config.compiler.relay, }) diff --git a/packages/next/server/config-shared.ts b/packages/next/server/config-shared.ts index c614c4816fb3a..4beec26a974a4 100644 --- a/packages/next/server/config-shared.ts +++ b/packages/next/server/config-shared.ts @@ -371,6 +371,11 @@ export interface NextConfig extends Record { * @see [Supported Compiler Options](https://nextjs.org/docs/advanced-features/compiler#supported-features) */ compiler?: { + reactRemoveProperties?: + | boolean + | { + properties?: string[] + } relay?: { src: string artifactDirectory?: string From ee47a7dd335fc0f6fb02c387199d8d45f6604e56 Mon Sep 17 00:00:00 2001 From: Maia Teegarden Date: Mon, 7 Feb 2022 13:53:36 -0800 Subject: [PATCH 04/21] Make experimentalDecorators a stable compiler opt --- docs/advanced-features/compiler.md | 32 +++++++++++++++--------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/docs/advanced-features/compiler.md b/docs/advanced-features/compiler.md index 4e3c3fd49943a..789be38d9a684 100644 --- a/docs/advanced-features/compiler.md +++ b/docs/advanced-features/compiler.md @@ -113,6 +113,22 @@ module.exports = { } ``` +### Legacy Decorators + +Next.js will automatically detect `experimentalDecorators` in `jsconfig.json` or `tsconfig.json` and apply that. This is commonly used with older versions of libraries like `mobx`. + +This flag is only supported for compatibility with existing applications. We do not recommend using legacy decorators in new applications. + +First, update to the latest version of Next.js: `npm install next@latest`. Then, update your `jsconfig.json` or `tsconfig.json` file: + +```js +{ + "compilerOptions": { + "experimentalDecorators": true + } +} +``` + ## Experimental Features ### Jest @@ -144,22 +160,6 @@ const customJestConfig = { module.exports = createJestConfig(customJestConfig) ``` -### Legacy Decorators - -Next.js will automatically detect `experimentalDecorators` in `jsconfig.json` or `tsconfig.json` and apply that. This is commonly used with older versions of libraries like `mobx`. - -This flag is only supported for compatibility with existing applications. We do not recommend using legacy decorators in new applications. - -First, update to the latest version of Next.js: `npm install next@latest`. Then, update your `jsconfig.json` or `tsconfig.json` file: - -```js -{ - "compilerOptions": { - "experimentalDecorators": true - } -} -``` - ### Remove Console This transform allows for removing all `console.*` calls in application code (not `node_modules`). Similar to `babel-plugin-transform-remove-console`. From 0f40ac57121ba7d82215758e7849c55356aa2e4c Mon Sep 17 00:00:00 2001 From: Maia Teegarden Date: Mon, 7 Feb 2022 13:59:06 -0800 Subject: [PATCH 05/21] Make removeConsole stable compiler option --- docs/advanced-features/compiler.md | 56 +++++++++++++-------------- packages/next/build/webpack-config.ts | 2 +- packages/next/server/config-shared.ts | 10 ++--- 3 files changed, 34 insertions(+), 34 deletions(-) diff --git a/docs/advanced-features/compiler.md b/docs/advanced-features/compiler.md index 789be38d9a684..114e42ede488d 100644 --- a/docs/advanced-features/compiler.md +++ b/docs/advanced-features/compiler.md @@ -129,6 +129,34 @@ First, update to the latest version of Next.js: `npm install next@latest`. Then, } ``` +### Remove Console + +This transform allows for removing all `console.*` calls in application code (not `node_modules`). Similar to `babel-plugin-transform-remove-console`. + +Remove all `console.*` calls: + +```js +// next.config.js +module.exports = { + compiler: { + removeConsole: true, + }, +} +``` + +Remove `console.*` output except `console.error`: + +```js +// next.config.js +module.exports = { + compiler: { + removeConsole: { + exclude: ['error'], + }, + }, +} +``` + ## Experimental Features ### Jest @@ -160,34 +188,6 @@ const customJestConfig = { module.exports = createJestConfig(customJestConfig) ``` -### Remove Console - -This transform allows for removing all `console.*` calls in application code (not `node_modules`). Similar to `babel-plugin-transform-remove-console`. - -Remove all `console.*` calls: - -```js -// next.config.js -module.exports = { - experimental: { - removeConsole: true, - }, -} -``` - -Remove `console.*` output except `console.error`: - -```js -// next.config.js -module.exports = { - experimental: { - removeConsole: { - exclude: ['error'], - }, - }, -} -``` - ### importSource Next.js will automatically detect `jsxImportSource` in `jsconfig.json` or `tsconfig.json` and apply that. This is commonly used with libraries like Theme UI. diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts index 459968278c704..04783e8177fba 100644 --- a/packages/next/build/webpack-config.ts +++ b/packages/next/build/webpack-config.ts @@ -1615,7 +1615,7 @@ export default async function getBaseWebpackConfig( concurrentFeatures: config.experimental.concurrentFeatures, swcMinify: config.swcMinify, swcLoader: useSWCLoader, - removeConsole: config.experimental.removeConsole, + removeConsole: config.compiler.removeConsole, reactRemoveProperties: config.compiler.reactRemoveProperties, styledComponents: config.compiler.styledComponents, relay: config.compiler.relay, diff --git a/packages/next/server/config-shared.ts b/packages/next/server/config-shared.ts index 4beec26a974a4..569f5ff405cd7 100644 --- a/packages/next/server/config-shared.ts +++ b/packages/next/server/config-shared.ts @@ -75,11 +75,6 @@ export interface NextJsWebpackConfig { export interface ExperimentalConfig { disablePostcssPresetEnv?: boolean - removeConsole?: - | boolean - | { - exclude?: string[] - } swcMinify?: boolean swcFileReading?: boolean cpus?: number @@ -381,6 +376,11 @@ export interface NextConfig extends Record { artifactDirectory?: string language?: 'typescript' | 'flow' } + removeConsole?: + | boolean + | { + exclude?: string[] + } styledComponents?: boolean } From 0346b8d18de8786a143ff1b7d34fd0bd5e4532b6 Mon Sep 17 00:00:00 2001 From: Maia Teegarden Date: Mon, 7 Feb 2022 14:02:34 -0800 Subject: [PATCH 06/21] Make importSource a stable compiler option --- docs/advanced-features/compiler.md | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/docs/advanced-features/compiler.md b/docs/advanced-features/compiler.md index 114e42ede488d..313a3fe789b22 100644 --- a/docs/advanced-features/compiler.md +++ b/docs/advanced-features/compiler.md @@ -157,6 +157,20 @@ module.exports = { } ``` +### importSource + +Next.js will automatically detect `jsxImportSource` in `jsconfig.json` or `tsconfig.json` and apply that. This is commonly used with libraries like Theme UI. + +First, update to the latest version of Next.js: `npm install next@latest`. Then, update your `jsconfig.json` or `tsconfig.json` file: + +```js +{ + "compilerOptions": { + "jsxImportSource": true + } +} +``` + ## Experimental Features ### Jest @@ -188,20 +202,6 @@ const customJestConfig = { module.exports = createJestConfig(customJestConfig) ``` -### importSource - -Next.js will automatically detect `jsxImportSource` in `jsconfig.json` or `tsconfig.json` and apply that. This is commonly used with libraries like Theme UI. - -First, update to the latest version of Next.js: `npm install next@latest`. Then, update your `jsconfig.json` or `tsconfig.json` file: - -```js -{ - "compilerOptions": { - "jsxImportSource": true - } -} -``` - ## Unsupported Features When your application has a `.babelrc` file, Next.js will automatically fall back to using Babel for transforming individual files. This ensures backwards compatibility with existing applications that leverage custom Babel plugins. From 3a5ea34f97e81f3a0d85672fe7190a631088f380 Mon Sep 17 00:00:00 2001 From: Maia Teegarden Date: Mon, 7 Feb 2022 14:08:14 -0800 Subject: [PATCH 07/21] Fix compiler doc --- docs/advanced-features/compiler.md | 64 +++++++++++++++--------------- 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/docs/advanced-features/compiler.md b/docs/advanced-features/compiler.md index 313a3fe789b22..1b8bab1d62d4a 100644 --- a/docs/advanced-features/compiler.md +++ b/docs/advanced-features/compiler.md @@ -32,18 +32,6 @@ We chose to build on SWC for a few reasons: ## Supported Features -### Minification - -You can opt-in to using the Next.js compiler for minification. This is 7x faster than Terser. - -```js -// next.config.js - -module.exports = { - swcMinify: true, -} -``` - If you have feedback about `swcMinify`, please share it on the [feedback discussion](https://github.com/vercel/next.js/discussions/30237). ### Styled Components @@ -56,7 +44,7 @@ First, update to the latest version of Next.js: `npm install next@latest`. Then, // next.config.js module.exports = { - experimental: { + compiler: { // ssr and displayName are configured by default styledComponents: true, }, @@ -72,7 +60,7 @@ To enable [Relay](https://relay.dev/) support: ```js // next.config.js module.exports = { - experimental: { + compiler: { relay: { // This should match relay.config.js src: './', @@ -94,7 +82,7 @@ To remove properties matching the default regex `^data-test`: ```js // next.config.js module.exports = { - experimental: { + compiler: { reactRemoveProperties: true, }, } @@ -105,7 +93,7 @@ To remove custom properties: ```js // next.config.js module.exports = { - experimental: { + compiler: { // The regexes defined here are processed in Rust so the syntax is different from // JavaScript `RegExp`s. See https://docs.rs/regex. reactRemoveProperties: { properties: ['^data-custom$'] }, @@ -113,22 +101,6 @@ module.exports = { } ``` -### Legacy Decorators - -Next.js will automatically detect `experimentalDecorators` in `jsconfig.json` or `tsconfig.json` and apply that. This is commonly used with older versions of libraries like `mobx`. - -This flag is only supported for compatibility with existing applications. We do not recommend using legacy decorators in new applications. - -First, update to the latest version of Next.js: `npm install next@latest`. Then, update your `jsconfig.json` or `tsconfig.json` file: - -```js -{ - "compilerOptions": { - "experimentalDecorators": true - } -} -``` - ### Remove Console This transform allows for removing all `console.*` calls in application code (not `node_modules`). Similar to `babel-plugin-transform-remove-console`. @@ -157,6 +129,22 @@ module.exports = { } ``` +### Legacy Decorators + +Next.js will automatically detect `experimentalDecorators` in `jsconfig.json` or `tsconfig.json` and apply that. This is commonly used with older versions of libraries like `mobx`. + +This flag is only supported for compatibility with existing applications. We do not recommend using legacy decorators in new applications. + +First, update to the latest version of Next.js: `npm install next@latest`. Then, update your `jsconfig.json` or `tsconfig.json` file: + +```js +{ + "compilerOptions": { + "experimentalDecorators": true + } +} +``` + ### importSource Next.js will automatically detect `jsxImportSource` in `jsconfig.json` or `tsconfig.json` and apply that. This is commonly used with libraries like Theme UI. @@ -173,6 +161,18 @@ First, update to the latest version of Next.js: `npm install next@latest`. Then, ## Experimental Features +### Minification + +You can opt-in to using the Next.js compiler for minification. This is 7x faster than Terser. + +```js +// next.config.js + +module.exports = { + swcMinify: true, +} +``` + ### Jest Jest support not only includes the transformation previously provided by Babel, but also simplifies configuring Jest together with Next.js including: From c6330949f64fb8665113dcaa51f0b2fcf8ac2a92 Mon Sep 17 00:00:00 2001 From: Maia Teegarden Date: Mon, 7 Feb 2022 17:56:02 -0800 Subject: [PATCH 08/21] Add telemetry --- packages/next/build/swc/options.js | 8 +-- packages/next/build/webpack-config.ts | 14 +++-- .../build/webpack/plugins/telemetry-plugin.ts | 16 ++++- packages/next/telemetry/events/build.ts | 6 ++ test/integration/telemetry/jsconfig.swc | 6 ++ test/integration/telemetry/next.config.swc | 14 +++++ test/integration/telemetry/test/index.test.js | 59 +++++++++++++++++-- 7 files changed, 108 insertions(+), 15 deletions(-) create mode 100644 test/integration/telemetry/jsconfig.swc create mode 100644 test/integration/telemetry/next.config.swc diff --git a/packages/next/build/swc/options.js b/packages/next/build/swc/options.js index 71504105236b4..2d2cbee22fa8b 100644 --- a/packages/next/build/swc/options.js +++ b/packages/next/build/swc/options.js @@ -81,14 +81,14 @@ export function getBaseSWCOptions({ }, }, sourceMaps: jest ? 'inline' : undefined, - styledComponents: nextConfig?.experimental?.styledComponents + styledComponents: nextConfig?.compiler?.styledComponents ? { displayName: Boolean(development), } : null, - removeConsole: nextConfig?.experimental?.removeConsole, - reactRemoveProperties: nextConfig?.experimental?.reactRemoveProperties, - relay: nextConfig?.experimental?.relay, + removeConsole: nextConfig?.compiler?.removeConsole, + reactRemoveProperties: nextConfig?.compiler?.reactRemoveProperties, + relay: nextConfig?.compiler?.relay, } } diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts index 04783e8177fba..3235039721f3d 100644 --- a/packages/next/build/webpack-config.ts +++ b/packages/next/build/webpack-config.ts @@ -1505,6 +1505,12 @@ export default async function getBaseWebpackConfig( new Map([ ['swcLoader', useSWCLoader], ['swcMinify', config.swcMinify], + ['swcRelay', !!config.compiler?.relay], + ['swcStyledComponents', !!config.compiler?.styledComponents], + ['swcReactRemoveProperties', !!config.reactRemoveProperties], + ['swcExperimentalDecorators', !!config.experimentalDecorators], + ['swcRemoveConsole', !!config.removeConsole], + ['swcImportSource', !!config.importSource], ]) ), ].filter(Boolean as any as ExcludesFalse), @@ -1615,10 +1621,10 @@ export default async function getBaseWebpackConfig( concurrentFeatures: config.experimental.concurrentFeatures, swcMinify: config.swcMinify, swcLoader: useSWCLoader, - removeConsole: config.compiler.removeConsole, - reactRemoveProperties: config.compiler.reactRemoveProperties, - styledComponents: config.compiler.styledComponents, - relay: config.compiler.relay, + removeConsole: config.compiler?.removeConsole, + reactRemoveProperties: config.compiler?.reactRemoveProperties, + styledComponents: config.compiler?.styledComponents, + relay: config.compiler?.relay, }) const cache: any = { diff --git a/packages/next/build/webpack/plugins/telemetry-plugin.ts b/packages/next/build/webpack/plugins/telemetry-plugin.ts index e961aacb05e6f..86269e8de8ab5 100644 --- a/packages/next/build/webpack/plugins/telemetry-plugin.ts +++ b/packages/next/build/webpack/plugins/telemetry-plugin.ts @@ -6,6 +6,12 @@ type Feature = | 'next/dynamic' | 'swcLoader' | 'swcMinify' + | 'swcRelay' + | 'swcStyledComponents' + | 'swcReactRemoveProperties' + | 'swcExperimentalDecorators' + | 'swcRemoveConsole' + | 'swcImportSource' interface FeatureUsage { featureName: Feature @@ -35,7 +41,15 @@ const FEATURE_MODULE_MAP: ReadonlyMap = new Map([ ]) // List of build features used in webpack configuration -const BUILD_FEATURES: Array = ['swcLoader', 'swcMinify'] +const BUILD_FEATURES: Array = [ + 'swcLoader', + 'swcMinify', + 'swcStyledComponents', + 'swcReactRemoveProperties', + 'swcExperimentalDecorators', + 'swcRemoveConsole', + 'swcImportSource', +] /** * Plugin that queries the ModuleGraph to look for modules that correspond to diff --git a/packages/next/telemetry/events/build.ts b/packages/next/telemetry/events/build.ts index 0be4c5d4e79a9..e68bbda1dd6d6 100644 --- a/packages/next/telemetry/events/build.ts +++ b/packages/next/telemetry/events/build.ts @@ -134,6 +134,12 @@ export type EventBuildFeatureUsage = { | 'optimizeFonts' | 'swcLoader' | 'swcMinify' + | 'swcRelay' + | 'swcStyledComponents' + | 'swcReactRemoveProperties' + | 'swcExperimentalDecorators' + | 'swcRemoveConsole' + | 'swcImportSource' | 'build-lint' invocationCount: number } diff --git a/test/integration/telemetry/jsconfig.swc b/test/integration/telemetry/jsconfig.swc new file mode 100644 index 0000000000000..6e2fcd2f1dfce --- /dev/null +++ b/test/integration/telemetry/jsconfig.swc @@ -0,0 +1,6 @@ +{ + "compilerOptions": { + "jsxImportSource": true, + "experimentalDecorators": true + } +} \ No newline at end of file diff --git a/test/integration/telemetry/next.config.swc b/test/integration/telemetry/next.config.swc new file mode 100644 index 0000000000000..6394ffee943d8 --- /dev/null +++ b/test/integration/telemetry/next.config.swc @@ -0,0 +1,14 @@ +module.exports = { + swcMinify: true, + compiler: { + relay: { + // This should match relay.config.js + src: './', + artifactDirectory: './__generated__', + language: 'typescript', + }, + styledComponents: true, + removeConsole: true, + reactRemoveProperties: true, + }, +} diff --git a/test/integration/telemetry/test/index.test.js b/test/integration/telemetry/test/index.test.js index add5b0d9665bc..a3b1884765cfb 100644 --- a/test/integration/telemetry/test/index.test.js +++ b/test/integration/telemetry/test/index.test.js @@ -619,12 +619,8 @@ describe('Telemetry CLI', () => { const optimizeFonts = regex.exec(stderr).pop() expect(optimizeFonts).toContain(`"featureName": "optimizeFonts"`) expect(optimizeFonts).toContain(`"invocationCount": 1`) - const swcLoader = regex.exec(stderr).pop() - expect(swcLoader).toContain(`"featureName": "swcLoader"`) - expect(swcLoader).toContain(`"invocationCount": 1`) - const swcMinify = regex.exec(stderr).pop() - expect(swcMinify).toContain(`"featureName": "swcMinify"`) - expect(swcMinify).toContain(`"invocationCount": 0`) + regex.exec(stderr).pop() // swcLoader + regex.exec(stderr).pop() // swcMinify const image = regex.exec(stderr).pop() expect(image).toContain(`"featureName": "next/image"`) expect(image).toContain(`"invocationCount": 1`) @@ -636,6 +632,57 @@ describe('Telemetry CLI', () => { expect(dynamic).toContain(`"invocationCount": 1`) }) + it('emits telemetry for usage of swc', async () => { + const { stderr } = await nextBuild(appDir, [], { + stderr: true, + env: { NEXT_TELEMETRY_DEBUG: 1 }, + }) + + await fs.copy( + path.join(appDir, 'next.config.swc'), + path.join(appDir, 'next.config.js') + ) + await fs.copy( + path.join(appDir, 'jsconfig.swc'), + path.join(appDir, 'jsconfig.json') + ) + + const regex = /NEXT_BUILD_FEATURE_USAGE[\s\S]+?{([\s\S]+?)}/g + regex.exec(stderr).pop() // optimizeCss + regex.exec(stderr).pop() // build-lint + regex.exec(stderr).pop() // optimizeFonts + const swcLoader = regex.exec(stderr).pop() + expect(swcLoader).toContain(`"featureName": "swcLoader"`) + expect(swcLoader).toContain(`"invocationCount": 1`) + const swcMinify = regex.exec(stderr).pop() + expect(swcMinify).toContain(`"featureName": "swcMinify"`) + //expect(swcMinify).toContain(`"invocationCount": 1`) + const swcRelay = regex.exec(stderr).pop() + expect(swcRelay).toContain(`"featureName": "swcRelay"`) + expect(swcRelay).toContain(`"invocationCount": 1`) + const swcStyledComponents = regex.exec(stderr).pop() + expect(swcStyledComponents).toContain( + `"featureName": "swcStyledComponents"` + ) + expect(swcStyledComponents).toContain(`"invocationCount": 1`) + const swcReactRemoveProperties = regex.exec(stderr).pop() + expect(swcReactRemoveProperties).toContain( + `"featureName": "swcReactRemoveProperties"` + ) + expect(swcReactRemoveProperties).toContain(`"invocationCount": 1`) + const swcExperimentalDecorators = regex.exec(stderr).pop() + expect(swcExperimentalDecorators).toContain( + `"featureName": "swcExperimentalDecorators"` + ) + expect(swcExperimentalDecorators).toContain(`"invocationCount": 1`) + const swcRemoveConsole = regex.exec(stderr).pop() + expect(swcRemoveConsole).toContain(`"featureName": "swcRemoveConsole"`) + expect(swcRemoveConsole).toContain(`"invocationCount": 1`) + const swcImportSource = regex.exec(stderr).pop() + expect(swcImportSource).toContain(`"featureName": "swcImportSource"`) + expect(swcImportSource).toContain(`"invocationCount": 1`) + }) + it('emits telemetry for usage of `optimizeCss`', async () => { await fs.rename( path.join(appDir, 'next.config.optimize-css'), From 125c8570d9c8de2275fce25cc4623527d9de5bc5 Mon Sep 17 00:00:00 2001 From: Maia Teegarden Date: Mon, 7 Feb 2022 18:13:38 -0800 Subject: [PATCH 09/21] Update test configs --- test/development/basic/styled-components/next.config.js | 2 +- .../relay-graphql-swc-multi-project/project-a/next.config.js | 2 +- .../relay-graphql-swc-multi-project/project-b/next.config.js | 2 +- .../integration/relay-graphql-swc-single-project/next.config.js | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/test/development/basic/styled-components/next.config.js b/test/development/basic/styled-components/next.config.js index b125c0d794776..91f693fda5258 100644 --- a/test/development/basic/styled-components/next.config.js +++ b/test/development/basic/styled-components/next.config.js @@ -1,5 +1,5 @@ module.exports = { - experimental: { + compiler: { styledComponents: true, }, } diff --git a/test/integration/relay-graphql-swc-multi-project/project-a/next.config.js b/test/integration/relay-graphql-swc-multi-project/project-a/next.config.js index 79ef26c30f3a1..49b503b7fde0a 100644 --- a/test/integration/relay-graphql-swc-multi-project/project-a/next.config.js +++ b/test/integration/relay-graphql-swc-multi-project/project-a/next.config.js @@ -1,7 +1,7 @@ const relay = require('../relay.config') module.exports = { - experimental: { + compiler: { relay: { src: './pages', artifactDirectory: './__generated__', diff --git a/test/integration/relay-graphql-swc-multi-project/project-b/next.config.js b/test/integration/relay-graphql-swc-multi-project/project-b/next.config.js index 79ef26c30f3a1..49b503b7fde0a 100644 --- a/test/integration/relay-graphql-swc-multi-project/project-b/next.config.js +++ b/test/integration/relay-graphql-swc-multi-project/project-b/next.config.js @@ -1,7 +1,7 @@ const relay = require('../relay.config') module.exports = { - experimental: { + compiler: { relay: { src: './pages', artifactDirectory: './__generated__', diff --git a/test/integration/relay-graphql-swc-single-project/next.config.js b/test/integration/relay-graphql-swc-single-project/next.config.js index ef214a05ace7a..89574d57d1a6b 100644 --- a/test/integration/relay-graphql-swc-single-project/next.config.js +++ b/test/integration/relay-graphql-swc-single-project/next.config.js @@ -1,7 +1,7 @@ const relay = require('./relay.config') module.exports = { - experimental: { + compiler: { relay, }, } From bf267b4735b548434915b908522b529ab6ed6b48 Mon Sep 17 00:00:00 2001 From: Maia Teegarden Date: Tue, 8 Feb 2022 10:25:56 -0800 Subject: [PATCH 10/21] Remove jsxImportSource configuration --- test/integration/telemetry/jsconfig.swc | 1 - 1 file changed, 1 deletion(-) diff --git a/test/integration/telemetry/jsconfig.swc b/test/integration/telemetry/jsconfig.swc index 6e2fcd2f1dfce..a178f9dcd04a7 100644 --- a/test/integration/telemetry/jsconfig.swc +++ b/test/integration/telemetry/jsconfig.swc @@ -1,6 +1,5 @@ { "compilerOptions": { - "jsxImportSource": true, "experimentalDecorators": true } } \ No newline at end of file From bd7bb08e9d1b4ea0ad51a18d36862ec0941bf32c Mon Sep 17 00:00:00 2001 From: Maia Teegarden Date: Tue, 8 Feb 2022 14:25:08 -0800 Subject: [PATCH 11/21] Pass tests --- docs/advanced-features/compiler.md | 2 +- packages/next/build/webpack-config.ts | 14 ++++++++++---- .../next/build/webpack/plugins/telemetry-plugin.ts | 1 + test/integration/telemetry/test/index.test.js | 12 ++++++++++-- 4 files changed, 22 insertions(+), 7 deletions(-) diff --git a/docs/advanced-features/compiler.md b/docs/advanced-features/compiler.md index 1b8bab1d62d4a..d22570a5360b6 100644 --- a/docs/advanced-features/compiler.md +++ b/docs/advanced-features/compiler.md @@ -154,7 +154,7 @@ First, update to the latest version of Next.js: `npm install next@latest`. Then, ```js { "compilerOptions": { - "jsxImportSource": true + "jsxImportSource": 'preact' } } ``` diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts index 1e59408578e68..728e206ab0cd0 100644 --- a/packages/next/build/webpack-config.ts +++ b/packages/next/build/webpack-config.ts @@ -1519,10 +1519,16 @@ export default async function getBaseWebpackConfig( ['swcMinify', config.swcMinify], ['swcRelay', !!config.compiler?.relay], ['swcStyledComponents', !!config.compiler?.styledComponents], - ['swcReactRemoveProperties', !!config.reactRemoveProperties], - ['swcExperimentalDecorators', !!config.experimentalDecorators], - ['swcRemoveConsole', !!config.removeConsole], - ['swcImportSource', !!config.importSource], + [ + 'swcReactRemoveProperties', + !!config.compiler?.reactRemoveProperties, + ], + [ + 'swcExperimentalDecorators', + !!jsConfig?.compilerOptions?.experimentalDecorators, + ], + ['swcRemoveConsole', !!config.compiler?.removeConsole], + ['swcImportSource', !!jsConfig?.compilerOptions?.jsxImportSource], ]) ), ].filter(Boolean as any as ExcludesFalse), diff --git a/packages/next/build/webpack/plugins/telemetry-plugin.ts b/packages/next/build/webpack/plugins/telemetry-plugin.ts index 86269e8de8ab5..fe1f370a283bb 100644 --- a/packages/next/build/webpack/plugins/telemetry-plugin.ts +++ b/packages/next/build/webpack/plugins/telemetry-plugin.ts @@ -44,6 +44,7 @@ const FEATURE_MODULE_MAP: ReadonlyMap = new Map([ const BUILD_FEATURES: Array = [ 'swcLoader', 'swcMinify', + 'swcRelay', 'swcStyledComponents', 'swcReactRemoveProperties', 'swcExperimentalDecorators', diff --git a/test/integration/telemetry/test/index.test.js b/test/integration/telemetry/test/index.test.js index a3b1884765cfb..478ed10bd1044 100644 --- a/test/integration/telemetry/test/index.test.js +++ b/test/integration/telemetry/test/index.test.js @@ -621,6 +621,12 @@ describe('Telemetry CLI', () => { expect(optimizeFonts).toContain(`"invocationCount": 1`) regex.exec(stderr).pop() // swcLoader regex.exec(stderr).pop() // swcMinify + regex.exec(stderr).pop() // swcRelay + regex.exec(stderr).pop() // swcStyledComponents + regex.exec(stderr).pop() // swcExperimentalDecorators + regex.exec(stderr).pop() // swcReactRemoveProperties + regex.exec(stderr).pop() // swcRemoveConsole + regex.exec(stderr).pop() // swcImportSource const image = regex.exec(stderr).pop() expect(image).toContain(`"featureName": "next/image"`) expect(image).toContain(`"invocationCount": 1`) @@ -647,6 +653,8 @@ describe('Telemetry CLI', () => { path.join(appDir, 'jsconfig.json') ) + console.log('STDERR', stderr) + const regex = /NEXT_BUILD_FEATURE_USAGE[\s\S]+?{([\s\S]+?)}/g regex.exec(stderr).pop() // optimizeCss regex.exec(stderr).pop() // build-lint @@ -656,7 +664,7 @@ describe('Telemetry CLI', () => { expect(swcLoader).toContain(`"invocationCount": 1`) const swcMinify = regex.exec(stderr).pop() expect(swcMinify).toContain(`"featureName": "swcMinify"`) - //expect(swcMinify).toContain(`"invocationCount": 1`) + expect(swcMinify).toContain(`"invocationCount": 1`) const swcRelay = regex.exec(stderr).pop() expect(swcRelay).toContain(`"featureName": "swcRelay"`) expect(swcRelay).toContain(`"invocationCount": 1`) @@ -680,7 +688,7 @@ describe('Telemetry CLI', () => { expect(swcRemoveConsole).toContain(`"invocationCount": 1`) const swcImportSource = regex.exec(stderr).pop() expect(swcImportSource).toContain(`"featureName": "swcImportSource"`) - expect(swcImportSource).toContain(`"invocationCount": 1`) + expect(swcImportSource).toContain(`"invocationCount": 0`) }) it('emits telemetry for usage of `optimizeCss`', async () => { From 4d83c5b2075bb1729a9890da0f36287863654aef Mon Sep 17 00:00:00 2001 From: Maia Teegarden Date: Tue, 8 Feb 2022 15:09:14 -0800 Subject: [PATCH 12/21] Add warning for ignored options when Babel is used --- errors/ignored-compiler-options.md | 9 ++ errors/manifest.json | 124 +++++++++++++++++++++----- packages/next/build/webpack-config.ts | 12 +++ 3 files changed, 121 insertions(+), 24 deletions(-) create mode 100644 errors/ignored-compiler-options.md diff --git a/errors/ignored-compiler-options.md b/errors/ignored-compiler-options.md new file mode 100644 index 0000000000000..edab33451d6ec --- /dev/null +++ b/errors/ignored-compiler-options.md @@ -0,0 +1,9 @@ +# ignored-compiler-options + +#### Why This Error Occurred + +Options under the `compiler` key in `next.config.js` only apply to the new Rust based compiler and will be ignored if Babel is used instead. This message will appear if Next.js detects a Babel configuration file while `compiler` options are configured in `next.config.js` + +### Useful Links + +- [Next.js Compiler](https://nextjs.org/docs/advanced-features/compiler) diff --git a/errors/manifest.json b/errors/manifest.json index 568ca2fffdafb..a7e0bc694424a 100644 --- a/errors/manifest.json +++ b/errors/manifest.json @@ -32,7 +32,10 @@ "title": "404-get-initial-props", "path": "/errors/404-get-initial-props.md" }, - { "title": "amp-bind-jsx-alt", "path": "/errors/amp-bind-jsx-alt.md" }, + { + "title": "amp-bind-jsx-alt", + "path": "/errors/amp-bind-jsx-alt.md" + }, { "title": "amp-export-validation", "path": "/errors/amp-export-validation.md" @@ -89,9 +92,18 @@ "title": "conflicting-ssg-paths", "path": "/errors/conflicting-ssg-paths.md" }, - { "title": "css-global", "path": "/errors/css-global.md" }, - { "title": "css-modules-npm", "path": "/errors/css-modules-npm.md" }, - { "title": "css-npm", "path": "/errors/css-npm.md" }, + { + "title": "css-global", + "path": "/errors/css-global.md" + }, + { + "title": "css-modules-npm", + "path": "/errors/css-modules-npm.md" + }, + { + "title": "css-npm", + "path": "/errors/css-npm.md" + }, { "title": "custom-error-no-custom-404", "path": "/errors/custom-error-no-custom-404.md" @@ -100,7 +112,10 @@ "title": "doc-crossorigin-deprecated", "path": "/errors/doc-crossorigin-deprecated.md" }, - { "title": "duplicate-sass", "path": "/errors/duplicate-sass.md" }, + { + "title": "duplicate-sass", + "path": "/errors/duplicate-sass.md" + }, { "title": "empty-configuration", "path": "/errors/empty-configuration.md" @@ -121,7 +136,10 @@ "title": "export-all-in-page", "path": "/errors/export-all-in-page.md" }, - { "title": "export-image-api", "path": "/errors/export-image-api.md" }, + { + "title": "export-image-api", + "path": "/errors/export-image-api.md" + }, { "title": "export-no-custom-routes", "path": "/errors/export-no-custom-routes.md" @@ -154,7 +172,10 @@ "title": "gssp-component-member", "path": "/errors/gssp-component-member.md" }, - { "title": "gssp-export", "path": "/errors/gssp-export.md" }, + { + "title": "gssp-export", + "path": "/errors/gssp-export.md" + }, { "title": "gssp-mixed-not-found-redirect", "path": "/errors/gssp-mixed-not-found-redirect.md" @@ -163,12 +184,18 @@ "title": "gssp-no-mutating-res", "path": "/errors/gssp-no-mutating-res.md" }, - { "title": "head-build-id", "path": "/errors/head-build-id.md" }, + { + "title": "head-build-id", + "path": "/errors/head-build-id.md" + }, { "title": "href-interpolation-failed", "path": "/errors/href-interpolation-failed.md" }, - { "title": "improper-devtool", "path": "/errors/improper-devtool.md" }, + { + "title": "improper-devtool", + "path": "/errors/improper-devtool.md" + }, { "title": "incompatible-href-as", "path": "/errors/incompatible-href-as.md" @@ -177,8 +204,14 @@ "title": "inline-script-id", "path": "/errors/inline-script-id.md" }, - { "title": "install-sass", "path": "/errors/install-sass.md" }, - { "title": "install-sharp", "path": "/errors/install-sharp.md" }, + { + "title": "install-sass", + "path": "/errors/install-sass.md" + }, + { + "title": "install-sharp", + "path": "/errors/install-sharp.md" + }, { "title": "invalid-assetprefix", "path": "/errors/invalid-assetprefix.md" @@ -251,7 +284,10 @@ "title": "link-passhref", "path": "/errors/link-passhref.md" }, - { "title": "manifest.json", "path": "/errors/manifest.json" }, + { + "title": "manifest.json", + "path": "/errors/manifest.json" + }, { "title": "minification-disabled", "path": "/errors/minification-disabled.md" @@ -264,7 +300,10 @@ "title": "missing-env-value", "path": "/errors/missing-env-value.md" }, - { "title": "multi-tabs", "path": "/errors/multi-tabs.md" }, + { + "title": "multi-tabs", + "path": "/errors/multi-tabs.md" + }, { "title": "nested-reserved-page", "path": "/errors/nested-reserved-page.md" @@ -305,8 +344,14 @@ "title": "next-start-serverless", "path": "/errors/next-start-serverless.md" }, - { "title": "no-cache", "path": "/errors/no-cache.md" }, - { "title": "no-css-tags", "path": "/errors/no-css-tags.md" }, + { + "title": "no-cache", + "path": "/errors/no-cache.md" + }, + { + "title": "no-css-tags", + "path": "/errors/no-css-tags.md" + }, { "title": "no-document-import-in-page", "path": "/errors/no-document-import-in-page.md" @@ -379,17 +424,26 @@ "title": "popstate-state-empty", "path": "/errors/popstate-state-empty.md" }, - { "title": "postcss-function", "path": "/errors/postcss-function.md" }, + { + "title": "postcss-function", + "path": "/errors/postcss-function.md" + }, { "title": "postcss-ignored-plugin", "path": "/errors/postcss-ignored-plugin.md" }, - { "title": "postcss-shape", "path": "/errors/postcss-shape.md" }, + { + "title": "postcss-shape", + "path": "/errors/postcss-shape.md" + }, { "title": "prefetch-true-deprecated", "path": "/errors/prefetch-true-deprecated.md" }, - { "title": "prerender-error", "path": "/errors/prerender-error.md" }, + { + "title": "prerender-error", + "path": "/errors/prerender-error.md" + }, { "title": "production-start-no-build-id", "path": "/errors/production-start-no-build-id.md" @@ -402,7 +456,10 @@ "title": "public-next-folder-conflict", "path": "/errors/public-next-folder-conflict.md" }, - { "title": "react-version", "path": "/errors/react-version.md" }, + { + "title": "react-version", + "path": "/errors/react-version.md" + }, { "title": "render-no-starting-slash", "path": "/errors/render-no-starting-slash.md" @@ -427,13 +484,22 @@ "title": "static-dir-deprecated", "path": "/errors/static-dir-deprecated.md" }, - { "title": "threw-undefined", "path": "/errors/threw-undefined.md" }, + { + "title": "threw-undefined", + "path": "/errors/threw-undefined.md" + }, { "title": "undefined-webpack-config", "path": "/errors/undefined-webpack-config.md" }, - { "title": "url-deprecated", "path": "/errors/url-deprecated.md" }, - { "title": "webpack5", "path": "/errors/webpack5.md" }, + { + "title": "url-deprecated", + "path": "/errors/url-deprecated.md" + }, + { + "title": "webpack5", + "path": "/errors/webpack5.md" + }, { "title": "client-side-exception-occurred", "path": "/errors/client-side-exception-occurred.md" @@ -446,8 +512,14 @@ "title": "link-multiple-children", "path": "/errors/link-multiple-children.md" }, - { "title": "no-img-element", "path": "/errors/no-img-element.md" }, - { "title": "no-head-element", "path": "/errors/no-head-element.md" }, + { + "title": "no-img-element", + "path": "/errors/no-img-element.md" + }, + { + "title": "no-head-element", + "path": "/errors/no-head-element.md" + }, { "title": "non-dynamic-getstaticpaths-usage", "path": "/errors/non-dynamic-getstaticpaths-usage.md" @@ -543,6 +615,10 @@ { "title": "deleting-query-params-in-middlewares", "path": "/errors/deleting-query-params-in-middlewares.md" + }, + { + "title": "ignored-compiler-options", + "path": "/errors/ignored-compiler-options.md" } ] } diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts index 728e206ab0cd0..97a67a25bbcde 100644 --- a/packages/next/build/webpack-config.ts +++ b/packages/next/build/webpack-config.ts @@ -86,6 +86,7 @@ const devtoolRevertWarning = execOnce( ) let loggedSwcDisabled = false +let loggedIgnoredCompilerOptions = false function getOptimizedAliases(): { [pkg: string]: string } { const stubWindowFetch = path.join(__dirname, 'polyfills', 'fetch', 'index.js') @@ -436,6 +437,17 @@ export default async function getBaseWebpackConfig( loggedSwcDisabled = true } + if ( + !loggedIgnoredCompilerOptions && + !useSWCLoader && + config.compiler != null + ) { + Log.info( + '`compiler` options in `next.config.js` will be ignored while using Babel https://next.js.org/docs/messages/ignored-compiler-options' + ) + loggedIgnoredCompilerOptions = true + } + const getBabelOrSwcLoader = (isMiddleware: boolean) => { return useSWCLoader ? { From 9d53c7976dd47e928acb7b7a12df7bf0cc692e12 Mon Sep 17 00:00:00 2001 From: Maia Teegarden Date: Tue, 8 Feb 2022 15:55:39 -0800 Subject: [PATCH 13/21] Add cleanup of test files --- test/integration/telemetry/test/index.test.js | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/test/integration/telemetry/test/index.test.js b/test/integration/telemetry/test/index.test.js index 478ed10bd1044..ba86d775b31f3 100644 --- a/test/integration/telemetry/test/index.test.js +++ b/test/integration/telemetry/test/index.test.js @@ -639,21 +639,22 @@ describe('Telemetry CLI', () => { }) it('emits telemetry for usage of swc', async () => { - const { stderr } = await nextBuild(appDir, [], { - stderr: true, - env: { NEXT_TELEMETRY_DEBUG: 1 }, - }) - - await fs.copy( + await fs.remove(path.join(appDir, 'next.config.js')) + await fs.remove(path.join(appDir, 'jsconfig.json')) + await fs.rename( path.join(appDir, 'next.config.swc'), path.join(appDir, 'next.config.js') ) - await fs.copy( + await fs.rename( path.join(appDir, 'jsconfig.swc'), path.join(appDir, 'jsconfig.json') ) - - console.log('STDERR', stderr) + const { stderr } = await nextBuild(appDir, [], { + stderr: true, + env: { NEXT_TELEMETRY_DEBUG: 1 }, + }) + await fs.remove(path.join(appDir, 'next.config.js')) + await fs.remove(path.join(appDir, 'jsconfig.json')) const regex = /NEXT_BUILD_FEATURE_USAGE[\s\S]+?{([\s\S]+?)}/g regex.exec(stderr).pop() // optimizeCss From ed8fe9c48eacea86a86ff97b14dc9f752c316728 Mon Sep 17 00:00:00 2001 From: Maia Teegarden Date: Tue, 8 Feb 2022 17:20:23 -0800 Subject: [PATCH 14/21] Update docs/advanced-features/compiler.md Co-authored-by: Steven --- docs/advanced-features/compiler.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/advanced-features/compiler.md b/docs/advanced-features/compiler.md index d22570a5360b6..24d2a25318afc 100644 --- a/docs/advanced-features/compiler.md +++ b/docs/advanced-features/compiler.md @@ -131,7 +131,7 @@ module.exports = { ### Legacy Decorators -Next.js will automatically detect `experimentalDecorators` in `jsconfig.json` or `tsconfig.json` and apply that. This is commonly used with older versions of libraries like `mobx`. +Next.js will automatically detect `experimentalDecorators` in `jsconfig.json` or `tsconfig.json`. Legacy decorators are commonly used with older versions of libraries like `mobx`. This flag is only supported for compatibility with existing applications. We do not recommend using legacy decorators in new applications. From b58987bacf82facff769f710319dcee9236a4088 Mon Sep 17 00:00:00 2001 From: Maia Teegarden Date: Wed, 9 Feb 2022 09:13:42 -0800 Subject: [PATCH 15/21] Fix doc --- docs/advanced-features/compiler.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/advanced-features/compiler.md b/docs/advanced-features/compiler.md index 24d2a25318afc..e7a3e21dddacd 100644 --- a/docs/advanced-features/compiler.md +++ b/docs/advanced-features/compiler.md @@ -32,8 +32,6 @@ We chose to build on SWC for a few reasons: ## Supported Features -If you have feedback about `swcMinify`, please share it on the [feedback discussion](https://github.com/vercel/next.js/discussions/30237). - ### Styled Components We're working to port `babel-plugin-styled-components` to the Next.js Compiler. @@ -173,6 +171,8 @@ module.exports = { } ``` +If you have feedback about `swcMinify`, please share it on the [feedback discussion](https://github.com/vercel/next.js/discussions/30237). + ### Jest Jest support not only includes the transformation previously provided by Babel, but also simplifies configuring Jest together with Next.js including: From e4006db4edc16baca2ebda76481ff81ccc2358b7 Mon Sep 17 00:00:00 2001 From: Maia Teegarden Date: Wed, 9 Feb 2022 09:52:17 -0800 Subject: [PATCH 16/21] Add version history row --- docs/advanced-features/compiler.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/docs/advanced-features/compiler.md b/docs/advanced-features/compiler.md index e7a3e21dddacd..c69d1e0ab2588 100644 --- a/docs/advanced-features/compiler.md +++ b/docs/advanced-features/compiler.md @@ -7,9 +7,10 @@ description: Learn about the Next.js Compiler, written in Rust, which transforms
Version History -| Version | Changes | -| --------- | --------------------------------------------------------------- | -| `v12.0.0` | Next.js Compiler [introduced](https://nextjs.org/blog/next-12). | +| Version | Changes | +| --------- | ---------------------------------------------------------------------------------------------------------------------------- | +| `v12.0.0` | Next.js Compiler [introduced](https://nextjs.org/blog/next-12). | +| `v12.1.0` | Added support for Styled Components, Relay, Remove React Properties, Legacy Decorators, Remove Console, and jsxImportSource. |
From f6ed3c3a767aeff9753b43d7d63f5645d1cee96e Mon Sep 17 00:00:00 2001 From: Maia Teegarden Date: Wed, 9 Feb 2022 11:11:49 -0800 Subject: [PATCH 17/21] Update packages/next/build/webpack-config.ts Co-authored-by: Steven --- packages/next/build/webpack-config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts index 97a67a25bbcde..58ba41641308c 100644 --- a/packages/next/build/webpack-config.ts +++ b/packages/next/build/webpack-config.ts @@ -440,7 +440,7 @@ export default async function getBaseWebpackConfig( if ( !loggedIgnoredCompilerOptions && !useSWCLoader && - config.compiler != null + config.compiler ) { Log.info( '`compiler` options in `next.config.js` will be ignored while using Babel https://next.js.org/docs/messages/ignored-compiler-options' From f6d88814597fa26ba2f30578cb3bf4f60e811f67 Mon Sep 17 00:00:00 2001 From: Maia Teegarden Date: Wed, 9 Feb 2022 11:19:55 -0800 Subject: [PATCH 18/21] Change version ordering --- docs/advanced-features/compiler.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/advanced-features/compiler.md b/docs/advanced-features/compiler.md index c69d1e0ab2588..69f6a7298965e 100644 --- a/docs/advanced-features/compiler.md +++ b/docs/advanced-features/compiler.md @@ -9,8 +9,8 @@ description: Learn about the Next.js Compiler, written in Rust, which transforms | Version | Changes | | --------- | ---------------------------------------------------------------------------------------------------------------------------- | -| `v12.0.0` | Next.js Compiler [introduced](https://nextjs.org/blog/next-12). | | `v12.1.0` | Added support for Styled Components, Relay, Remove React Properties, Legacy Decorators, Remove Console, and jsxImportSource. | +| `v12.0.0` | Next.js Compiler [introduced](https://nextjs.org/blog/next-12). | From 6a744cf761617356ff845d068fa6d294a3944c5a Mon Sep 17 00:00:00 2001 From: Maia Teegarden Date: Wed, 9 Feb 2022 11:56:22 -0800 Subject: [PATCH 19/21] Fix formatting --- packages/next/build/webpack-config.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts index 58ba41641308c..20c86444faa5a 100644 --- a/packages/next/build/webpack-config.ts +++ b/packages/next/build/webpack-config.ts @@ -437,11 +437,7 @@ export default async function getBaseWebpackConfig( loggedSwcDisabled = true } - if ( - !loggedIgnoredCompilerOptions && - !useSWCLoader && - config.compiler - ) { + if (!loggedIgnoredCompilerOptions && !useSWCLoader && config.compiler) { Log.info( '`compiler` options in `next.config.js` will be ignored while using Babel https://next.js.org/docs/messages/ignored-compiler-options' ) From df51081ad028d846be24a8e692e77d771b21db95 Mon Sep 17 00:00:00 2001 From: Maia Teegarden Date: Wed, 9 Feb 2022 14:02:02 -0800 Subject: [PATCH 20/21] Add warnings to update config --- packages/next/server/config.ts | 42 ++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/packages/next/server/config.ts b/packages/next/server/config.ts index 6a64992688521..04a1727eddf2d 100644 --- a/packages/next/server/config.ts +++ b/packages/next/server/config.ts @@ -365,6 +365,48 @@ function assignDefaults(userConfig: { [key: string]: any }) { result.swcMinify = (result.experimental as any).swcMinify } + if (result.experimental && 'relay' in (result.experimental as any)) { + Log.warn( + `\`relay\` has been moved out of \`experimental\` and into \`compiler\`. Please update your ${configFileName} file accordingly.` + ) + result.compiler = result.compiler || {} + result.compiler.relay = (result.experimental as any).relay + } + + if ( + result.experimental && + 'styledComponents' in (result.experimental as any) + ) { + Log.warn( + `\`styledComponents\` has been moved out of \`experimental\` and into \`compiler\`. Please update your ${configFileName} file accordingly.` + ) + result.compiler = result.compiler || {} + result.compiler.styledComponents = ( + result.experimental as any + ).styledComponents + } + + if ( + result.experimental && + 'reactRemoveProperties' in (result.experimental as any) + ) { + Log.warn( + `\`reactRemoveProperties\` has been moved out of \`experimental\` and into \`compiler\`. Please update your ${configFileName} file accordingly.` + ) + result.compiler = result.compiler || {} + result.compiler.reactRemoveProperties = ( + result.experimental as any + ).reactRemoveProperties + } + + if (result.experimental && 'removeConsole' in (result.experimental as any)) { + Log.warn( + `\`removeConsole\` has been moved out of \`experimental\` and into \`compiler\`. Please update your ${configFileName} file accordingly.` + ) + result.compiler = result.compiler || {} + result.compiler.removeConsole = (result.experimental as any).removeConsole + } + if (result.swcMinify) { Log.warn( 'SWC minify release candidate enabled. https://nextjs.org/docs/messages/swc-minify-enabled' From 84a8a3d71684a841ea0efbded097326d4183ac5e Mon Sep 17 00:00:00 2001 From: Maia Teegarden Date: Wed, 9 Feb 2022 14:07:47 -0800 Subject: [PATCH 21/21] Add jest to supported features in compiler doc --- docs/advanced-features/compiler.md | 66 +++++++++++++++--------------- 1 file changed, 33 insertions(+), 33 deletions(-) diff --git a/docs/advanced-features/compiler.md b/docs/advanced-features/compiler.md index 69f6a7298965e..439474fa11f33 100644 --- a/docs/advanced-features/compiler.md +++ b/docs/advanced-features/compiler.md @@ -7,10 +7,10 @@ description: Learn about the Next.js Compiler, written in Rust, which transforms
Version History -| Version | Changes | -| --------- | ---------------------------------------------------------------------------------------------------------------------------- | -| `v12.1.0` | Added support for Styled Components, Relay, Remove React Properties, Legacy Decorators, Remove Console, and jsxImportSource. | -| `v12.0.0` | Next.js Compiler [introduced](https://nextjs.org/blog/next-12). | +| Version | Changes | +| --------- | ---------------------------------------------------------------------------------------------------------------------------------- | +| `v12.1.0` | Added support for Styled Components, Jest, Relay, Remove React Properties, Legacy Decorators, Remove Console, and jsxImportSource. | +| `v12.0.0` | Next.js Compiler [introduced](https://nextjs.org/blog/next-12). |
@@ -52,6 +52,35 @@ module.exports = { Currently, only the `ssr` and `displayName` transforms have been implemented. These two transforms are the main requirement for using `styled-components` in Next.js. +### Jest + +Jest support not only includes the transformation previously provided by Babel, but also simplifies configuring Jest together with Next.js including: + +- Auto mocking of `.css`, `.module.css` (and their `.scss` variants), and image imports +- Automatically sets up `transform` using SWC +- Loading `.env` (and all variants) into `process.env` +- Ignores `node_modules` from test resolving and transforms +- Ignoring `.next` from test resolving +- Loads `next.config.js` for flags that enable experimental SWC transforms + +First, update to the latest version of Next.js: `npm install next@latest`. Then, update your `jest.config.js` file: + +```js +// jest.config.js +const nextJest = require('next/jest') + +// Providing the path to your Next.js app which will enable loading next.config.js and .env files +const createJestConfig = nextJest({ dir }) + +// Any custom config you want to pass to Jest +const customJestConfig = { + setupFilesAfterEnv: ['/jest.setup.js'], +} + +// createJestConfig is exported in this way to ensure that next/jest can load the Next.js configuration, which is async +module.exports = createJestConfig(customJestConfig) +``` + ### Relay To enable [Relay](https://relay.dev/) support: @@ -174,35 +203,6 @@ module.exports = { If you have feedback about `swcMinify`, please share it on the [feedback discussion](https://github.com/vercel/next.js/discussions/30237). -### Jest - -Jest support not only includes the transformation previously provided by Babel, but also simplifies configuring Jest together with Next.js including: - -- Auto mocking of `.css`, `.module.css` (and their `.scss` variants), and image imports -- Automatically sets up `transform` using SWC -- Loading `.env` (and all variants) into `process.env` -- Ignores `node_modules` from test resolving and transforms -- Ignoring `.next` from test resolving -- Loads `next.config.js` for flags that enable experimental SWC transforms - -First, update to the latest version of Next.js: `npm install next@latest`. Then, update your `jest.config.js` file: - -```js -// jest.config.js -const nextJest = require('next/jest') - -// Providing the path to your Next.js app which will enable loading next.config.js and .env files -const createJestConfig = nextJest({ dir }) - -// Any custom config you want to pass to Jest -const customJestConfig = { - setupFilesAfterEnv: ['/jest.setup.js'], -} - -// createJestConfig is exported in this way to ensure that next/jest can load the Next.js configuration, which is async -module.exports = createJestConfig(customJestConfig) -``` - ## Unsupported Features When your application has a `.babelrc` file, Next.js will automatically fall back to using Babel for transforming individual files. This ensures backwards compatibility with existing applications that leverage custom Babel plugins.