[Link Component] Accessing element.ref was removed in React 19

gagzu commented 2 weeks ago

Link to the code that reproduces this issue

https://github.com/gagzu/nextjs-issue-link-component-example

To Reproduce

To reproduce the error:

Clone this repository https://github.com/gagzu/nextjs-issue-link-component-example
Install the dependencies yarn install
Run the app using yarn dev
Open your browser at http://localhost:3000/

Open the developer inspector, and you will see an error similar to the following:

hook.js:608 Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release. Error Component Stack
at LinkComponent (link.tsx:304:16)
at NextLinkComposed (index.tsx:22:63)
at MuiButtonBase-root (emotion-element-7a13…opment.esm.js:48:26)
at ButtonBase (ButtonBase.js:84:31)
at MuiButton-root (emotion-element-7a13…opment.esm.js:48:26)
at Button (Button.js:314:30)
at div (<anonymous>)
at Styled(:3000/div) (http://l…16ac0._.js:7324:197)
at Box (createBox.js:20:26)
at ButtonExample (<anonymous>)
at Contact [Server] (<anonymous>)
at InnerLayoutRouter (layout-router.tsx:324:3)
at RedirectErrorBoundary (redirect-boundary.tsx:48:5)
at RedirectBoundary (redirect-boundary.tsx:79:9)
at HTTPAccessFallbackErrorBoundary (http-access-fallback-boundary.tsx:49:5)
at HTTPAccessFallbackBoundary (http-access-fallback-boundary.tsx:133:3)
at LoadingBoundary (layout-router.tsx:465:3)
at ErrorBoundary (error-boundary.tsx:190:3)
at InnerScrollAndFocusHandler (layout-router.tsx:289:3)
at ScrollAndFocusHandler (layout-router.tsx:299:9)
at RenderFromTemplateContext (render-from-template-context.tsx:8:10)
at OuterLayoutRouter (layout-router.tsx:511:9)
at DefaultPropsProvider (DefaultPropsProvider.js:9:3)
at RtlProvider (index.js:6:3)
at ThemeProvider (ThemeProvider.js:33:5)
at ThemeProvider (ThemeProvider.js:48:5)
at ThemeProviderNoVars (ThemeProviderNoVars.js:8:10)
at ThemeProvider (ThemeProvider.js:9:3)
at AppRouterCacheProvider (appRouterV13.js:15:5)
at body (<anonymous>)
at html (<anonymous>)
at RootLayout [Server] (<anonymous>)
at RedirectErrorBoundary (redirect-boundary.tsx:48:5)
at RedirectBoundary (redirect-boundary.tsx:79:9)
at HTTPAccessFallbackErrorBoundary (http-access-fallback-boundary.tsx:49:5)
at HTTPAccessFallbackBoundary (http-access-fallback-boundary.tsx:133:3)
at DevRootHTTPAccessFallbackBoundary (dev-root-http-access…k-boundary.tsx:20:3)
at ReactDevOverlay (ReactDevOverlay.tsx:91:3)
at HotReload (hot-reloader-client.tsx:523:3)
at Router (app-router.tsx:254:9)
at ErrorBoundaryHandler (error-boundary.tsx:69:11)
at ErrorBoundary (error-boundary.tsx:190:3)
at AppRouter (app-router.tsx:660:3)
at ServerRoot (app-index.tsx:184:32)
at Root (app-index.tsx:212:17)

Current vs. Expected behavior

The error I'm getting is: "Accessing element.ref was removed in React 19." The error is due to the Link component using forwardRef.

The expected result is: Not seeing any error in the console.

Provide environment information

information about my environment:
Operating System:
  Platform: linux
  Arch: x64
  Version: #135~20.04.1-Ubuntu SMP Mon Oct 7 13:56:22 UTC 2024
  Available memory (MB): 15871
  Available CPU cores: 4
Binaries:
  Node: 20.9.0
  npm: 10.1.0
  Yarn: 1.22.22
  pnpm: N/A
Relevant Packages:
  next: 15.0.4-canary.13 // Latest available version is detected (15.0.4-canary.13).
  eslint-config-next: 15.0.3
  react: 19.0.0-rc.1
  react-dom: 19.0.0-rc.1
  typescript: 5.6.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Navigation

Which stage(s) are affected? (Select all that apply)

next dev (local), next start (local)

Additional context

No response

gabriez commented 1 week ago

I'm getting the same error using ref

Fatima-yo commented 1 week ago

Do you plan to fix this error soon? I have the same problem.

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

vercel / next.js