facing type error on upgrading react version from 17 -> 18

[tushar27042]

Facing this issue only when upgrading the react version from 17 to 18.

Current behavior:

css="You have tried to stringify object returned from css function. It isn't supposed to be used directly (e.g. as value of the className prop), but rather handed to emotion so it can handle it (e.g. as value of css prop)."

1. import { jsx /* css */ } from "@emotion/react";
2. export const railnavMenuWrapper = css <some css & rules> ``
3. <div css={railnavMenuWrapper}></div>

Expected behavior:

Should work smoothly without throwing any error or breaking the css.

Environment information:

• react version: 18.3.1
• @emotion/react version: 11.8.
• node-version: 22.14.0

[Andarist]

Please always try to share a repro case in a runnable form - either by providing a git repository to clone or a codesandbox. OSS maintainers usually can't afford the time to set up the repro, even if exact steps are given.

[tushar27042]

Please always try to share a repro case in a runnable form - either by providing a git repository to clone or a codesandbox. OSS maintainers usually can't afford the time to set up the repro, even if exact steps are given.

https://codesandbox.io/p/devbox/lucid-parm-5m8mr6?workspaceId=ws_4DYs3er3KcBeau18DJQWPj

[RohitRonghe]

@Andarist do we have an update on this?

CC: @tushar27042

[tushar27042]

@Andarist Do we have an update on this ? I’m currently blocked because of it and need to proceed with my work. Let me know if any further details are required from my end. Thanks!

cc: @RohitRonghe

[tushar27042]

Please always try to share a repro case in a runnable form - either by providing a git repository to clone or a codesandbox. OSS maintainers usually can't afford the time to set up the repro, even if exact steps are given.

any update on the above issue?
cc: @RohitRonghe

[tushar27042]

Please always try to share a repro case in a runnable form - either by providing a git repository to clone or a codesandbox. OSS maintainers usually can't afford the time to set up the repro, even if exact steps are given.

@Andarist any update on the above listed issue?

[Andarist]

@tushar27042 you are supposed to use the JSX pragma to fix this: https://emotion.sh/docs/css-prop#jsx-pragma