Outdated JSX transform

[topaxi]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/remix

SDK Version

7.113.0

Framework Version

React canary or React 19 Beta

Link to Sentry event

No response

SDK Setup

No response

Steps to Reproduce

Use and install Sentry with React canary or React 19 Beta.

Expected Result

No warning should be logged. Sentry React artifacts should use the new(ish? 😁) JSX transform.

Actual Result

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
SentryRoot
div
div
body
html
Layout@http://localhost:4000/app/root.tsx:63:7
RenderedRoute@http://localhost:4000/node_modules/.vite/deps/chunk-TGWP4JAX.js?v=55caa5db:403:7
RenderErrorBoundary@http://localhost:4000/node_modules/.vite/deps/chunk-TGWP4JAX.js?v=55caa5db:360:5
DataRoutes@http://localhost:4000/node_modules/.vite/deps/chunk-TGWP4JAX.js?v=55caa5db:1392:7
Router@http://localhost:4000/node_modules/.vite/deps/chunk-TGWP4JAX.js?v=55caa5db:748:7
RouterProvider@http://localhost:4000/node_modules/.vite/deps/chunk-TGWP4JAX.js?v=55caa5db:1209:7
RemixErrorBoundary@http://localhost:4000/node_modules/.vite/deps/chunk-TGWP4JAX.js?v=55caa5db:3451:5
RemixBrowser@http://localhost:4000/node_modules/.vite/deps/chunk-TGWP4JAX.js?v=55caa5db:4108:46

[lforst]

Thanks for letting us know! We'll make sure that this is not gonna happen when react 19 drops, or at least shortly after :)

[kentcdodds]

Just bumped into this myself. Was going to contribute until I saw the build comes from @sentry-internal/rollup-utils. So I'll just leave this to you all. Thanks!

[lforst]

@kentcdodds Thanks for trying 😂 I am taking a look at this right now. I was wondering how libraries should go about using a jsx runtime so I was looking up how react router does it for example but it seems like you guys are also still using React.createElement.

The concrete problem I am facing is whether to use import { jsx } from 'react/jsx-runtime' or whether to use import { jsxDEV } from 'react/jsx-dev-runtime' in our compiled code. I would assume the former but I am not sure of the impact in dev mode. Actually looking a bit further into it, it seems jsx will just alias to jsxDEV in dev mode 👍