nrwl / nx

Smart Monorepos · Fast CI
https://nx.dev
MIT License
23.66k stars 2.36k forks source link

Warning about outdated JSX transform being used for Next.js apps with React 19 #27900

Open lourd opened 2 months ago

lourd commented 2 months ago

Current Behavior

When generating a new Next.js application or library, using the React 19 RC, and running the default generated test, there's a console warning:

> jest

  console.warn
    Warning: Your app (or one of its dependencies) is using an outdated JSX transform. Update to the modern JSX transform for faster performance: https://react.dev/link/new-jsx-transform

       5 | describe("Page", () => {
       6 |   it("should render successfully", () => {
    >  7 |     const { baseElement } = render(<Page />)
         |                                    ^
       8 |     expect(baseElement).toBeTruthy()
       9 |   })
      10 | })

I cannot figure out where the outdated transform is being specified - babel-jest, the @nx/next/babel preset, or the underlying next babel preset.

Expected Behavior

The new JSX transform should be used during tests

GitHub Repo

No response

Steps to Reproduce

  1. Generate a new Nx workspace
  2. Generate a new Next.js application
  3. Be on one of the canary versions of Next.js v15 and one of the v19 RCs for react & react-dom
  4. Run the test for the Next.js application. See the warning

Nx Report

Node           : 20.12.1
OS             : darwin-arm64
Native Target  : aarch64-macos
pnpm           : 9.7.0

nx                 : 19.7.2
@nx/js             : 19.7.2
@nx/jest           : 19.7.2
@nx/linter         : 19.7.2
@nx/eslint         : 19.7.2
@nx/workspace      : 19.7.2
@nx/devkit         : 19.7.2
@nx/esbuild        : 19.7.2
@nx/eslint-plugin  : 19.7.2
@nx/next           : 19.7.2
@nx/node           : 19.7.2
@nx/playwright     : 19.7.2
@nx/react          : 19.7.2
@nrwl/tao          : 19.7.2
@nx/vite           : 19.7.2
@nx/web            : 19.7.2
@nx/webpack        : 19.7.2
typescript         : 5.5.4
---------------------------------------
Registered Plugins:
@nx/next/plugin
@nx/playwright/plugin
@nx/eslint/plugin
@nx/jest/plugin

Failure Logs

No response

Package Manager Version

No response

Operating System

Additional Information

No response

lourd commented 3 weeks ago

Still happening on Nx v20, with Next.js 15 and @testing-library/react 16.0.1

DanielCripps94 commented 2 weeks ago

Was there any resolution to this in the end? facing same on Nx v20, with Next.js 15?

ndcunningham commented 2 weeks ago

Hey, thanks for filling out an issue!

It makes complete sense to hold off on making any significant updates until a stable release of React 19 is available, especially with core libraries like Next.js and React Testing Library not yet fully aligned in their version support. Given that React 19 RC may introduce breaking changes, integrating it prematurely could lead to unforeseen issues in testing and production environments.

For now, maintaining compatibility with React 18, which is stable and well-supported, is likely the best approach until the ecosystem catches up with stable React 19 support.

lourd commented 2 weeks ago

The new JSX transform has been out for 4 years, since React 17. The only thing new in React 19 is the warning that you're using the old transform. Upgrading the JSX transform used in whatever Jest preset/configuration is being used here can and should happen separately from upgrading to React 19.

ndcunningham commented 2 weeks ago

Oh, I misunderstood. I think we should be able to address this although the warning is from React 19 RC which I hope isn't blocking you.