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

primitives/packages/react/slot/src/Slot.tsx

Line 66 in be80c2a

ref: forwardedRef ? composeRefs(forwardedRef, (children as any).ref) : (children as any).ref,

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/@radix-ui+react-slot@1.0.2_@types+react@18.2.54_react@18.2.0/node_modules/@radix-ui/react-slot/dist/index.mjs:46:23)
    at eval (webpack-internal:///(ssr)/../../node_modules/.pnpm/@radix-ui+react-slot@1.0.2_@types+react@18.2.54_react@18.2.0/node_modules/@radix-ui/react-slot/dist/index.mjs:20:23)                                                                                                                                 
    at eval (webpack-internal:///(ssr)/../../node_modules/.pnpm/@radix-ui+react-primitive@1.0.3_@types+react-dom@18.2.14_@types+react@18.2.54_react-dom@18.2.0_react@18.2.0/node_modules/@radix-ui/react-primitive/dist/index.mjs:44:26)                                                                             
    at eval (webpack-internal:///(ssr)/../../node_modules/.pnpm/@radix-ui+react-popper@1.1.3_@types+react-dom@18.2.14_@types+react@18.2.54_react-dom@18.2.0_react@18.2.0/node_modules/@radix-ui/react-popper/dist/index.mjs:80:28)                                                                                   
    at eval (webpack-internal:///(ssr)/../../node_modules/.pnpm/@radix-ui+react-menu@2.0.6_@types+react-dom@18.2.14_@types+react@18.2.54_react-dom@18.2.0_react@18.2.0/node_modules/@radix-ui/react-menu/dist/index.mjs:211:26)                                                                                      
    at eval (webpack-internal:///(ssr)/../../node_modules/.pnpm/@radix-ui+react-dropdown-menu@2.0.6_@types+react-dom@18.2.14_@types+react@18.2.54_react-dom@18.2.0_react@18.2.0/node_modules/@radix-ui/react-dropdown-menu/dist/index.mjs:110:34)                                                                    
    at Provider (webpack-internal:///(ssr)/../../node_modules/.pnpm/@radix-ui+react-context@1.0.1_@types+react@18.2.54_react@18.2.0/node_modules/@radix-ui/react-context/dist/index.mjs:47:28)                                                                                                                       
    at Provider (webpack-internal:///(ssr)/../../node_modules/.pnpm/@radix-ui+react-context@1.0.1_@types+react@18.2.54_react@18.2.0/node_modules/@radix-ui/react-context/dist/index.mjs:47:28)                                                                                                                       
    at Provider (webpack-internal:///(ssr)/../../node_modules/.pnpm/@radix-ui+react-context@1.0.1_@types+react@18.2.54_react@18.2.0/node_modules/@radix-ui/react-context/dist/index.mjs:47:28)                                                                                                                       
    at $cf1ac5d9fe0e8206$export$badac9ada3a0bdf9 (webpack-internal:///(ssr)/../../node_modules/.pnpm/@radix-ui+react-popper@1.1.3_@types+react-dom@18.2.14_@types+react@18.2.54_react-dom@18.2.0_react@18.2.0/node_modules/@radix-ui/react-popper/dist/index.mjs:65:28)                                              
    at $6cc32821e9371a1c$export$d9b273488cd8ce6f (webpack-internal:///(ssr)/../../node_modules/.pnpm/@radix-ui+react-menu@2.0.6_@types+react-dom@18.2.14_@types+react@18.2.54_react-dom@18.2.0_react@18.2.0/node_modules/@radix-ui/react-menu/dist/index.mjs:150:26)
    at Provider (webpack-internal:///(ssr)/../../node_modules/.pnpm/@radix-ui+react-context@1.0.1_@types+react@18.2.54_react@18.2.0/node_modules/@radix-ui/react-context/dist/index.mjs:47:28)                                                                                                                       
    at $d08ef79370b62062$export$e44a253a59704894 (webpack-internal:///(ssr)/../../node_modules/.pnpm/@radix-ui+react-dropdown-menu@2.0.6_@types+react-dom@18.2.14_@types+react@18.2.54_react-dom@18.2.0_react@18.2.0/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/@tanstack+react-query@5.17.19_react@18.2.0/node_modules/@tanstack/react-query/build/modern/QueryClientProvider.js:21:30)
    at Provider (webpack-internal:///(ssr)/../../node_modules/.pnpm/react-redux@8.1.3_@types+react-dom@18.2.14_@types+react@18.2.54_react-dom@18.2.0_react@18.2.0_redux@4.2.1/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/next@14.2.0-canary.9_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:241:11)
    at RedirectErrorBoundary (webpack-internal:///(ssr)/../../node_modules/.pnpm/next@14.2.0-canary.9_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/redirect-boundary.js:72:9)
    at RedirectBoundary (webpack-internal:///(ssr)/../../node_modules/.pnpm/next@14.2.0-canary.9_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/redirect-boundary.js:80:11)
    at NotFoundErrorBoundary (webpack-internal:///(ssr)/../../node_modules/.pnpm/next@14.2.0-canary.9_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/not-found-boundary.js:76:9)
    at NotFoundBoundary (webpack-internal:///(ssr)/../../node_modules/.pnpm/next@14.2.0-canary.9_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/not-found-boundary.js:84:11)
    at LoadingBoundary (webpack-internal:///(ssr)/../../node_modules/.pnpm/next@14.2.0-canary.9_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:341:11)
    at ErrorBoundaryHandler (webpack-internal:///(ssr)/../../node_modules/.pnpm/next@14.2.0-canary.9_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/error-boundary.js:113:9)
    at ErrorBoundary (webpack-internal:///(ssr)/../../node_modules/.pnpm/next@14.2.0-canary.9_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/error-boundary.js:159:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(ssr)/../../node_modules/.pnpm/next@14.2.0-canary.9_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:152:9)
    at ScrollAndFocusHandler (webpack-internal:///(ssr)/../../node_modules/.pnpm/next@14.2.0-canary.9_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:227:11)
    at RenderFromTemplateContext (webpack-internal:///(ssr)/../../node_modules/.pnpm/next@14.2.0-canary.9_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/render-from-template-context.js:16:44)
    at Lazy                                                           
    at OuterLayoutRouter (webpack-internal:///(ssr)/../../node_modules/.pnpm/next@14.2.0-canary.9_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:359:11)
    at Lazy                                                           
    at f (webpack-internal:///(ssr)/../../node_modules/.pnpm/next-themes@0.2.1_next@14.2.0-canary.9_react-dom@18.2.0_react@18.2.0/node_modules/next-themes/dist/index.module.js:8:597)
    at $ (webpack-internal:///(ssr)/../../node_modules/.pnpm/next-themes@0.2.1_next@14.2.0-canary.9_react-dom@18.2.0_react@18.2.0/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 facebook/react#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?