From 360480152a81bb6386996d5e4354ac9f424eadc9 Mon Sep 17 00:00:00 2001 From: Jack Hsu Date: Mon, 29 May 2023 09:20:41 -0400 Subject: [PATCH] feat(nextjs): add babel root-mode option to withNx plugin --- .../next/documents/next-config-setup.md | 22 ++++++++++++++++++- .../shared/packages/next/next-config-setup.md | 22 ++++++++++++++++++- packages/next/plugins/with-nx.ts | 7 ++++-- 3 files changed, 47 insertions(+), 4 deletions(-) diff --git a/docs/generated/packages/next/documents/next-config-setup.md b/docs/generated/packages/next/documents/next-config-setup.md index 8bed0d81ca94f7..1d8253c37c1f9b 100644 --- a/docs/generated/packages/next/documents/next-config-setup.md +++ b/docs/generated/packages/next/documents/next-config-setup.md @@ -22,12 +22,32 @@ module.exports = withNx({ }); ``` -This guide contains information on how to compose the Nx plugin with other plugins, such as `@next/mdx`. Note that Nx prior to version 16 is missing the compose utility from the `@nx/next` package, and a workaround will be provided for Nx 15 and prior. +This guide contains information on how to configure and compose the Nx plugin with other plugins, such as `@next/mdx`. Note that Nx prior to version 16 is missing the compose utility from the `@nx/next` package, and a workaround will be provided for Nx 15 and prior. {% callout type="warning" title="Avoid next-compose-plugins" %} There is a popular package called `next-compose-plugins` that has not been maintained for over two years. This package does not correctly combine plugins in all situations. If you do use it, replace the package with Nx 16's `composePlugins` utility (see below). {% /callout %} +## `withNx` plugin + +The `withNx` Next.js plugin provides integration with Nx, including support for [workspace libraries](/packages/next/generators/library), SVGR, and more. It is included by default when you generate a Next.js [application](/packages/next/generators/application) with Nx. When you customize your `next.config.js` file, make sure to include the `withNx` plugin. + +### Options + +#### svgr + +Type: `boolean` + +Set this to true if you would like to to use SVGR. See: https://react-svgr.com/ + +#### babelUpwardRootMode + +Type: `boolean` + +For a monorepo, set to `true` to incorporate `.babelrc` files from individual libraries into the build. Note, however, that doing so will prevent the application's `.babelrc` settings from being applied to its libraries. It is generally recommended not to enable this option, as it can lead to a lack of consistency throughout the workspace. Instead, the application's `.babelrc` file should include the presets and plugins needed by its libraries directly. For more information on babel root-mode, see here: https://babeljs.io/docs/en/options#rootmode + +Set this to `true` if you want `.babelrc` from libraries to be used in a monorepo. Note that setting this to `true` means the application's `.babelrc` will not apply to libraries, and it is recommended not to use this option as it may lead to inconsistency in the workspace. Instead, add babel presets/plugins required by libraries directly to the application's `.babelrc` file. See: https://babeljs.io/docs/en/options#rootmode + ## Composing plugins using `composePlugins` utility (Nx 16 and later) Since Nx 16, we provide a `composePlugins` utility function that helps users combine multiple Next.js plugins together. diff --git a/docs/shared/packages/next/next-config-setup.md b/docs/shared/packages/next/next-config-setup.md index 8bed0d81ca94f7..1d8253c37c1f9b 100644 --- a/docs/shared/packages/next/next-config-setup.md +++ b/docs/shared/packages/next/next-config-setup.md @@ -22,12 +22,32 @@ module.exports = withNx({ }); ``` -This guide contains information on how to compose the Nx plugin with other plugins, such as `@next/mdx`. Note that Nx prior to version 16 is missing the compose utility from the `@nx/next` package, and a workaround will be provided for Nx 15 and prior. +This guide contains information on how to configure and compose the Nx plugin with other plugins, such as `@next/mdx`. Note that Nx prior to version 16 is missing the compose utility from the `@nx/next` package, and a workaround will be provided for Nx 15 and prior. {% callout type="warning" title="Avoid next-compose-plugins" %} There is a popular package called `next-compose-plugins` that has not been maintained for over two years. This package does not correctly combine plugins in all situations. If you do use it, replace the package with Nx 16's `composePlugins` utility (see below). {% /callout %} +## `withNx` plugin + +The `withNx` Next.js plugin provides integration with Nx, including support for [workspace libraries](/packages/next/generators/library), SVGR, and more. It is included by default when you generate a Next.js [application](/packages/next/generators/application) with Nx. When you customize your `next.config.js` file, make sure to include the `withNx` plugin. + +### Options + +#### svgr + +Type: `boolean` + +Set this to true if you would like to to use SVGR. See: https://react-svgr.com/ + +#### babelUpwardRootMode + +Type: `boolean` + +For a monorepo, set to `true` to incorporate `.babelrc` files from individual libraries into the build. Note, however, that doing so will prevent the application's `.babelrc` settings from being applied to its libraries. It is generally recommended not to enable this option, as it can lead to a lack of consistency throughout the workspace. Instead, the application's `.babelrc` file should include the presets and plugins needed by its libraries directly. For more information on babel root-mode, see here: https://babeljs.io/docs/en/options#rootmode + +Set this to `true` if you want `.babelrc` from libraries to be used in a monorepo. Note that setting this to `true` means the application's `.babelrc` will not apply to libraries, and it is recommended not to use this option as it may lead to inconsistency in the workspace. Instead, add babel presets/plugins required by libraries directly to the application's `.babelrc` file. See: https://babeljs.io/docs/en/options#rootmode + ## Composing plugins using `composePlugins` utility (Nx 16 and later) Since Nx 16, we provide a `composePlugins` utility function that helps users combine multiple Next.js plugins together. diff --git a/packages/next/plugins/with-nx.ts b/packages/next/plugins/with-nx.ts index bb015ed559d146..68ec0456d75d99 100644 --- a/packages/next/plugins/with-nx.ts +++ b/packages/next/plugins/with-nx.ts @@ -12,6 +12,7 @@ import type { ProjectGraph, ProjectGraphProjectNode, Target } from '@nx/devkit'; export interface WithNxOptions extends NextConfig { nx?: { svgr?: boolean; + babelUpwardRootMode?: boolean; }; } @@ -239,8 +240,10 @@ export function getNextConfig( * Update babel to support our monorepo setup. * The 'upward' mode allows the root babel.config.json and per-project .babelrc files to be picked up. */ - options.defaultLoaders.babel.options.babelrc = true; - options.defaultLoaders.babel.options.rootMode = 'upward'; + if (nx.babelUpwardRootMode) { + options.defaultLoaders.babel.options.babelrc = true; + options.defaultLoaders.babel.options.rootMode = 'upward'; + } /* * Modify the Next.js webpack config to allow workspace libs to use css modules.