primitives
primitives copied to clipboard
[Slot] React 18.3.0 canary, ref is now a regular prop
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 |
is this a bug or we need to fix this?
I think this is a bug
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 (
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.
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)
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.
Is there any word on how to solve this / this bug will be resolved soon?