Nx 22.1 Released: Terminal UI for Windows, AI Migrations, and Enhanced Testing Ecosystem

Software Development

Nx 22.1 enhances developer experience with Terminal UI for Windows, AI-powered Storybook 10 migrations, a new Vitest plugin, and support for Next.js v16 and Cypress v15. Angular 21 support is next.

Following the recent Nx 22 release, Nx 22.1 is now available, bringing a host of improvements designed to enhance the daily development experience. This update fulfills a key promise for Windows users, significantly upgrades the testing ecosystem, and prepares for upcoming Angular 21 support.

Terminal UI now available on Windows

The Terminal UI (TUI), introduced in Nx 21, was initially unavailable on Windows due to compatibility issues. This limitation prevented Windows developers from experiencing the enhanced task running environment enjoyed by Mac and Linux users. Nx 22.1 now enables the Terminal UI by default on Windows, offering a superior task management experience. Users can now benefit from a task list panel displaying all active tasks, a separate panel for the log output of the selected task, and seamless navigation between tasks using arrow keys or Vim-style h/j/k/l bindings. This feature is particularly beneficial for continuous tasks, such as running a frontend application dependent on a backend server. Both tasks will appear in the list, allowing easy switching between their logs without losing context.

Storybook 10 support with AI-powered migrations

Storybook 10 introduces a major change by becoming ESM-only (ECMAScript Modules). While this simplifies distribution and reduces install size by 29%, it necessitates that Storybook configurations and stories adhere to valid ESM syntax. Although @nx/storybook has generated valid ESM configurations for several years, older codebases may require migration from CommonJS to ESM. Recognizing the complexity of this transition for traditional AST-based codemods, Nx has adopted an AI-powered approach.

When executing nx migrate latest, Storybook packages will update as usual. Additionally, Nx will generate AI agent instructions to facilitate the conversion of your code from CommonJS to ESM. These instructions can then be run with your preferred AI agent to complete the migration. It is crucial, as with any AI-generated changes, to verify the modifications made by the agent. The Storybook team has provided guidance on this migration to assist with verification or manual migration if needed.

Nx plans to extend the use of AI-powered migrations to other tools, aiming to streamline transitions that were previously difficult or entirely manual. For those not yet ready for Storybook 10, Storybook 9 will continue to be fully supported. Refer to the documentation on customizing migrations for more information.

Vitest gets its own plugin

Vitest now has its own dedicated @nx/vitest plugin, decoupled from @nx/vite. This separation simplifies independent Vitest usage and paves the way for enhanced feature development. The new plugin introduces Vitest 4 support and atomizer support for Vitest. Atomization is Nx's mechanism for automatically splitting your test suite by file, optimizing CI distribution. This allows a lengthy test task (e.g., 10 minutes) to be divided into multiple parallel smaller tasks, significantly reducing 'Time to Green'.

Support for Vitest via the @nx/vite plugin will continue until the release of Nx v23. Users are encouraged to follow the migration guide to transition to @nx/vitest prior to this release.

Next.js v16 support

Next.js v16 is now supported within Nx. New workspaces will automatically leverage v16, while existing workspaces will retain their current Next.js version. Currently, Nx does not offer an automated migration to v16; users can upgrade by following the migration guide provided by the Next.js team. Similar to the Storybook 10 migration, Nx will soon provide AI agent instructions based on this guide to streamline the upgrade process.

Cypress v15 support

Cypress v15 support has been integrated. Updating your workspace will enable access to the latest Cypress features.

Coming soon: Angular 21 support

Angular 21, a significant release, launched on November 20. The Nx team is actively developing support for it, anticipated in an upcoming 22.2 release. A key highlight is the adoption of Vitest as the default test runner for new Angular projects, replacing Karma. This aligns seamlessly with the new @nx/vitest plugin and its atomizer support, providing Angular teams with fast, parallelizable tests and excellent Nx Cloud integration from the outset. Further details on Angular 21 support will be shared upon its release.

Migrating to Nx 22.1

Migrating to Nx 22.1 is a straightforward process:

nx migrate latest

After updating dependencies, execute any required migrations:

nx migrate --run-migrations

Alternatively, leverage the Migrate UI in Nx Console for a visual migration experience, allowing review and approval of each change.

The nitty gritty

For a comprehensive list of all improvements and fixes not covered here, please refer to the full release notes on GitHub.