[Slot] React 18.3.0 canary, ref is now a regular prop

[gtjamesa]

Bug report

Current Behavior

Next.js 14.1.1-canary.74 is pulling in the latest React 18.3.0 canary release has this upstream change: Pass ref as normal prop (#28348). This is throwing a warning: Warning: Accessing element.ref is no longer supported. ref is now a regular prop. It will be removed from the JSX Element type in a future release.

I assume it is the following line of code that is causing the warning:

https://github.com/radix-ui/primitives/blob/be80c2a309c1afd07f4176c742ea16ac0675659f/packages/react/slot/src/Slot.tsx#L66

Full error message

Warning: Accessing element.ref is no longer supported. ref is now a regular prop. It will be removed from the JSX Element type in a future release.   
    at eval (webpack-internal:///(ssr)/../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@radix-ui/react-slot/dist/index.mjs:46:23)
    at eval (webpack-internal:///(ssr)/../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@radix-ui/react-slot/dist/index.mjs:20:23)                                                                                                                                 
    at eval (webpack-internal:///(ssr)/../../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/@radix-ui/react-primitive/dist/index.mjs:44:26)                                                                             
    at eval (webpack-internal:///(ssr)/../../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/@radix-ui/react-popper/dist/index.mjs:80:28)                                                                                   
    at eval (webpack-internal:///(ssr)/../../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/@radix-ui/react-menu/dist/index.mjs:211:26)                                                                                      
    at eval (webpack-internal:///(ssr)/../../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/@radix-ui/react-dropdown-menu/dist/index.mjs:110:34)                                                                    
    at Provider (webpack-internal:///(ssr)/../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@radix-ui/react-context/dist/index.mjs:47:28)                                                                                                                       
    at Provider (webpack-internal:///(ssr)/../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@radix-ui/react-context/dist/index.mjs:47:28)                                                                                                                       
    at Provider (webpack-internal:///(ssr)/../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@radix-ui/react-context/dist/index.mjs:47:28)                                                                                                                       
    at $cf1ac5d9fe0e8206$export$badac9ada3a0bdf9 (webpack-internal:///(ssr)/../../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/@radix-ui/react-popper/dist/index.mjs:65:28)                                              
    at $6cc32821e9371a1c$export$d9b273488cd8ce6f (webpack-internal:///(ssr)/../../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/@radix-ui/react-menu/dist/index.mjs:150:26)
    at Provider (webpack-internal:///(ssr)/../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@radix-ui/react-context/dist/index.mjs:47:28)                                                                                                                       
    at $d08ef79370b62062$export$e44a253a59704894 (webpack-internal:///(ssr)/../../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/@radix-ui/react-dropdown-menu/dist/index.mjs:75:34)
    at DarkModeToggle (webpack-internal:///(ssr)/./src/components/layout/status/DarkModeToggle.tsx:19:13)                                                                                                                                                                                                            
    at Lazy                                                                                                                                                                                                                                                                                                          
    at div                                                                                                                                                                                                                                                                                                           
    at div                                                                                                                                                                                                                                                                                                           
    at div                                                                                                                                                                                                                                                                                                           
    at div                                                            
    at MenuProvider (webpack-internal:///(ssr)/./src/components/providers/MenuProvider.tsx:15:25)                                                     
    at Lazy                                                           
    at ApiClientProvider (webpack-internal:///(ssr)/../../packages/core/src/providers/ApiClientProvider.tsx:23:34)                                    
    at ApiClientProvider (webpack-internal:///(ssr)/./src/features/api/ApiClientProvider.tsx:15:30)                                                   
    at QueryClientProvider (webpack-internal:///(ssr)/../../node_modules/.pnpm/@[email protected][email protected]/node_modules/@tanstack/react-query/build/modern/QueryClientProvider.js:21:30)
    at Provider (webpack-internal:///(ssr)/../../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/react-redux/es/components/Provider.js:16:3)
    at Providers (webpack-internal:///(ssr)/./src/components/providers/Providers.tsx:26:22)                                                           
    at Lazy                                                           
    at WebsocketProvider (webpack-internal:///(ssr)/../../packages/websockets/src/WebsocketProvider.tsx:20:30)                                        
    at Lazy                                                           
    at InnerLayoutRouter (webpack-internal:///(ssr)/../../node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/client/components/layout-router.js:241:11)
    at RedirectErrorBoundary (webpack-internal:///(ssr)/../../node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/client/components/redirect-boundary.js:72:9)
    at RedirectBoundary (webpack-internal:///(ssr)/../../node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/client/components/redirect-boundary.js:80:11)
    at NotFoundErrorBoundary (webpack-internal:///(ssr)/../../node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/client/components/not-found-boundary.js:76:9)
    at NotFoundBoundary (webpack-internal:///(ssr)/../../node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/client/components/not-found-boundary.js:84:11)
    at LoadingBoundary (webpack-internal:///(ssr)/../../node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/client/components/layout-router.js:341:11)
    at ErrorBoundaryHandler (webpack-internal:///(ssr)/../../node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/client/components/error-boundary.js:113:9)
    at ErrorBoundary (webpack-internal:///(ssr)/../../node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/client/components/error-boundary.js:159:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(ssr)/../../node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/client/components/layout-router.js:152:9)
    at ScrollAndFocusHandler (webpack-internal:///(ssr)/../../node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/client/components/layout-router.js:227:11)
    at RenderFromTemplateContext (webpack-internal:///(ssr)/../../node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/client/components/render-from-template-context.js:16:44)
    at Lazy                                                           
    at OuterLayoutRouter (webpack-internal:///(ssr)/../../node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/client/components/layout-router.js:359:11)
    at Lazy                                                           
    at f (webpack-internal:///(ssr)/../../node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next-themes/dist/index.module.js:8:597)
    at $ (webpack-internal:///(ssr)/../../node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next-themes/dist/index.module.js:8:348)
    at ThemeProvider (webpack-internal:///(ssr)/./src/components/providers/ThemeProvider.tsx:10:26)

Expected behaviour

No warning

Reproducible example

Will update with a repro

Suggested solution

n/a

Additional context

I am using Radix via shadcn-ui

Your environment

Software	Name(s)	Version
Radix Package(s)	slot	1.0.2
React	n/a	18.3.0-canary-6c3b8dbfe-20240226
Browser		Firefox
Assistive tech	n/a
Node	n/a
npm/yarn	pnpm	8.15.4
Operating System	Linux

[gokulkrishh]

is this a bug or we need to fix this?

[muhaimincs]

I think this is a bug

[mgusmano]

any resolution to this? I am having the same issue and I do not understrand if it is something I am doing wrong or it is a bug in React?

this is what I currently have

export function Test(props) { const TestRef = useRef(null); useEffect(() => { (async () => { console.log('TestRef.currrent', TestRef.current) })(); }, []) return (

test component

); }

[chungweileong94]

This is a warning rather than a React bug. Based on my understanding of https://github.com/facebook/react/pull/28348, ref is just a normal prop when using forwardRef:

From React.forwardRef((props, ref) => null) to React.forwardRef(({ref, ...props}) => null), however, @types/dom doesn't seem to support that just yet.

[UPDATE] So I misinterpreted the warning, it's about accessing the ref via element. ref is no longer supported, and we should access it via element.props.ref instead. Just created a PR #2811 to fix the issue.

[timarney]

Seeing the same error for a while now.

app-index.js:33 Warning: Accessing element.ref is no longer supported. ref is now a regular prop. It will be removed from the JSX Element type in a future release.
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/@radix-ui/react-slot/dist/index.mjs:46:23)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/@radix-ui/react-slot/dist/index.mjs:20:23)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/@radix-ui/react-primitive/dist/index.mjs:44:26)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/@radix-ui/react-popper/dist/index.mjs:80:28)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/@radix-ui/react-menu/dist/index.mjs:211:26)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/@radix-ui/react-dropdown-menu/dist/index.mjs:110:34)

[ryanleichty]

I'm seeing this with other Radix components too

Warning: Accessing element.ref is no longer supported. ref is now a regular prop. It will be removed from the JSX Element type in a future release.

[hatchli]

Is there any word on how to solve this / this bug will be resolved soon?

[jazsouf]

Hey, does anyone you know if there is a way to minimise the size of this warning in the console? In my Nextjs app I get a 75 line trace log twice every time I boot up the dev server.

Thanks to the people working on the issue!

[chungweileong94]

Hey, does anyone you know if there is a way to minimise the size of this warning in the console? In my Nextjs app I get a 75 line trace log twice every time I boot up the dev server.

For the time being, you could patch the package via patch-package, with all the changes in #2811

[simonri]

Is there any word on how to solve this / this bug will be resolved soon?

Upgrading to React 19 removes this warning.

[chungweileong94]

Upgrading to React 19 removes this warning.

Yes and no, upgrade to React 19 will remove the warning, but it will throw an error instead when it is about to execute the line.

[mahfuz0001]

any update on how to get rid of it?

[vladmoroz]

This is fixed in the new release candidate versions – please let us know if you run into any other issues with React 19

[fgatti675]

This is fixed in the new release candidate versions – please let us know if you run into any other issues with React 19

Hi @vladmoroz thanks! Do you know if the new versions will work fine with React 18? Thanks!

[vladmoroz]

Yep, React 16.8 throughout React 19 are supported