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

gtjamesa · 2024-03-09T10:39:20Z

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/@[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

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

The text was updated successfully, but these errors were encountered:

gokulkrishh · 2024-03-13T05:15:43Z

is this a bug or we need to fix this?

muhaimincs · 2024-03-14T22:30:19Z

I think this is a bug

mgusmano · 2024-03-23T11:06:28Z

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 · 2024-03-27T13:42:27Z

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 · 2024-04-16T13:26:55Z

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 · 2024-04-30T19:48:45Z

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 · 2024-05-05T00:09:53Z

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

jazsouf · 2024-05-14T13:53:23Z

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 · 2024-05-14T15:33:41Z

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 · 2024-05-20T14:50:48Z

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

Upgrading to React 19 removes this warning.

chungweileong94 · 2024-05-21T03:16:25Z

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 · 2024-05-27T07:51:01Z

any update on how to get rid of it?

chungweileong94 linked a pull request Apr 2, 2024 that will close this issue

[Slot] Access ref from props else fallback to element.ref #2811

Open

stipsan mentioned this issue Apr 11, 2024

fix: regression hiding tool buttons when embedded on Next.js sanity-io/sanity#6338

Merged

eps1lon mentioned this issue May 13, 2024

React 19 library compat eps1lon/react#10

Open

12 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

gtjamesa commented Mar 9, 2024

gokulkrishh commented Mar 13, 2024

muhaimincs commented Mar 14, 2024

mgusmano commented Mar 23, 2024

chungweileong94 commented Mar 27, 2024 •

edited

timarney commented Apr 16, 2024

ryanleichty commented Apr 30, 2024

hatchli commented May 5, 2024

jazsouf commented May 14, 2024

chungweileong94 commented May 14, 2024

simonri commented May 20, 2024

chungweileong94 commented May 21, 2024

mahfuz0001 commented May 27, 2024

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

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

Comments

gtjamesa commented Mar 9, 2024

Bug report

Current Behavior

Expected behaviour

Reproducible example

Suggested solution

Additional context

Your environment

gokulkrishh commented Mar 13, 2024

muhaimincs commented Mar 14, 2024

mgusmano commented Mar 23, 2024

chungweileong94 commented Mar 27, 2024 • edited

timarney commented Apr 16, 2024

ryanleichty commented Apr 30, 2024

hatchli commented May 5, 2024

jazsouf commented May 14, 2024

chungweileong94 commented May 14, 2024

simonri commented May 20, 2024

chungweileong94 commented May 21, 2024

mahfuz0001 commented May 27, 2024

chungweileong94 commented Mar 27, 2024 •

edited