[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?