8000 Warning about outdated JSX transform being used for Next.js apps with React 19 · Issue #27900 · nrwl/nx · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

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

8000
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
2 of 4 tasks
lourd opened this issue Sep 12, 2024 · 9 comments
Open
2 of 4 tasks

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

lourd opened this issue Sep 12, 2024 · 9 comments
Assignees
@ndcunningham
Labels
scope: nextjs Issues related to NextJS support for Nx type: bug

Comments

@lourd
Copy link
Contributor
lourd commented Sep 12, 2024

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

  • macOS
  • Linux
  • Windows
  • Other (Please specify)

Additional Information

No response
@jaysoo jaysoo added the scope: nextjs Issues related to NextJS support for Nx label Sep 25, 2024
@lourd
Copy link
Contributor Author
lourd commented Oct 22, 2024

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

@DanielCripps94
Copy link

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

@ndcunningham
Copy link
Contributor

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
Copy link
Contributor Author
lourd commented Oct 30, 2024

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
Copy link
Contributor

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.

@Joao-Pacheco
Copy link

facing the same problem here.

@nacho-eng
Copy link

Just updated to NextJS15 and React19. I started facing this since we dont allow warnings or errors in our jest suits. Is this an active item that is going to be release soon?

@DamandeepS
Copy link
DamandeepS commented Mar 14, 2025 •
edited
Loading

I was able to make work with following A328 configuration

import { Config } from 'jest';
import nextJest from 'next/jest.js';

const createJestConfig = nextJest({
  dir: './',
});

const config = createJestConfig({
  displayName: '@your-org/project-name',
  preset: '../../jest.preset.js',
  transform: {
    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/next/babel'] }],
  },
  moduleNameMapper: {
    '^@/components/(.*)$': '<rootDir>/components/$1',
  },
  testPathIgnorePatterns: ['/node_modules/', '/.next/', '/playwright/'],
  testMatch: ['**/*/(test|spec).(ts|tsx|js|jsx)'],
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
  coverageDirectory: 'test-output/jest/coverage',
});

// eslint-disable-next-line import/no-anonymous-default-export
export default async () =>
  ({
    ...(await config()),
    coverageProvider: 'v8',
    verbose: process.env.CI ? false : true,
  } as Config);

@spencermarx
Copy link

Hey there, any update on progress against this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ndcunningham ndcunningham

Labels
scope: nextjs Issues related to NextJS support for Nx type: bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@jaysoo @ndcunningham @lourd @DamandeepS @Joao-Pacheco @spencermarx @DanielCripps94 @nacho-eng
0