[BUG] - Cannot read properties of undefined (reading 'startsWith')

[malezjaa]

NextUI Version

@nextui-org/link 2.0.29, next.js 14.2.1

Describe the bug

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'startsWith')

Call Stack
startsWith
../src/shared/lib/router/utils/add-path-prefix.ts
path
../src/client/add-base-path.ts
href
../src/client/components/app-router.tsx
navigate
../src/client/components/app-router.tsx
React
options
../src/client/components/app-router.tsx
eval
..\..\node_modules\@react-aria\utils\dist\openLink.mjs (29:1)
$ea8dcbcb9ea1b556$var$getSyntheticLink
..\..\node_modules\@react-aria\utils\dist\openLink.mjs (88:1)
Object.open
..\..\node_modules\@react-aria\utils\dist\openLink.mjs (28:1)
onClick
..\..\node_modules\@nextui-org\use-aria-link\dist\index.mjs (42:1)

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

<p className={"text-center"}>
  Need to create an account?
  <Link href={"/register"} className={"ml-1 cursor-pointer"}>
    Sign Up
  </Link>
</p>

When I try to click "Sign Up" I get this error.

This is my providers.tsx:

"use client";

export function Providers({ children, themeProps }: ProvidersProps) {
  const router = useRouter();

  return (
    <AuthProvider>
      <NextUIProvider navigate={router.push}>
        <NextThemesProvider {...themeProps}>{children}</NextThemesProvider>
      </NextUIProvider>
    </AuthProvider>
  );
}

Expected behavior

To redirect

Screenshots or Videos

No response

Operating System Version

Windows

Browser

Chrome

[linear]

ENG-783 [BUG] - YOUR_ISSUE_TITLE_HERE_REPLACE_ME

[hericsantos]

Same here

[pjatupon]

me too. i'm change import Link from "@nextui-org/link" to Link from "next/link".

[ryo-manba]

Could not reproduce. Please provide a link to stackblitz to investigate.

Related issue: #2930

[mozisan]

Repro: https://stackblitz.com/edit/stackblitz-starters-ixzkrk?file=README.md

[armandtht]

same for me

[wingkwong]

The fix will be available in the next release (20th May). At the same time, you can use our canary version as a workaround if necessary.

"@nextui-org/system": "0.0.0-canary-20240504162810"

update NextUIProvider to use @nextui-org/system

import { NextUIProvider } from "@nextui-org/system";

[zhiqingchen]

Will this fix be released soon? No release on May 20th

[wingkwong]

@zhiqingchen I'm writing the release note now. Previously we were fully occupied by other internal stuff. Will release soon. Sorry for any inconvenience caused.

[Jihefel]

Is it already fixed in 2.4.1 ?
I still have that error.

[wingkwong]

@Jihefel yes. please remove node_modules and reinstall. If error still occurs, please share a stackblitz / codesandbox project to us.

[Jihefel]

@Jihefel yes. please remove node_modules and reinstall. If error still occurs, please share a stackblitz / codesandbox project to us.

I followed your instructions but the error still occurs. I think my problem is quite simple. It is not directly linked to the component "Link" (which is actually fixed) but rather to the href prop on a "ListboxItem" component

[alarv]

This is still happening for me too, the proposed solutions don't work. I tried to reproduce on a stackblitz but to no avail

[elanclarkson]

This appears to be fixed for links, but not for linked tabs. My use-case is a little different to the documented example so I will see if I can create a repro when I get time. This may not be for a while however, so if anyone else has this issue please feel free to do it instead.

[wingkwong]

for those who still encounter the issue, please create a new issue with a minimal reproducible example. I need to look into it one by one.

[alarv]

for those who still encounter the issue, please create a new issue with a minimal reproducible example. I need to look into it one by one.

Hi @wingkwong I was finally able to reproduce the issue, here it is: https://codesandbox.io/p/devbox/zen-moore-knpyrs

If you visit this page: https://knpyrs-3000.csb.app/dashboard/tabs you will be able to reproduce the issue by clicking on any of the tabs.

(EDIT: added a new issue as requested here: #3197)

[trescomasdev]

I had the same issue, but updating @nextui-org/system, @nextui-org/react and @nextui-org/link to the latest version and import the NextUIProvider from the @nextui-org/system package resolved the issue.
Just to make sure I deleted the node_modules folder after the updates and installed everything again and now the Link are working.

[komirellipavan]

Updating @nextui-org/link to latest version worked for me