[BUG] - path is undefined when using NextUIProvider and useRouter in React component

[Sw0xy]

NextUI Version

2.3.6

Describe the bug

The bug causes a "TypeError: path is undefined" when using NextUIProvider and useRouter in a React component.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1- Import NextUIProvider and useRouter.
2- Define a React functional component named Providers, accepting children as props.
3 - Within Providers component, initialize useRouter hook to get the router object.
4 - Use NextUIProvider component, passing router.push method as navigate prop.
5 - Encounter "TypeError: path is undefined" error during execution.

Expected behavior

As a user, I expect that when using the NextUIProvider and useRouter within a React component, the application should function correctly without encountering any errors related to undefined paths.

Screenshots or Videos

Operating System Version

Ubuntu

Browser

Firefox

[linear]

ENG-780 [BUG] - path is undefined when using NextUIProvider and useRouter in React component

[wingkwong]

Can you provide a stackblitz link for us to investigate the issue? I'm not able to reproduce. Also it seems the issue was thrown in somewhere else.

[Sw0xy]

I can't do it right now but I am using empty T3 stack.

[mozisan]

I think this issue is related to the update of the @react-aria/utils package.
The following diff seems to be relevant:
adobe/react-spectrum@2318292#diff-b47f93129ab2e1ce25df1793dca18da226bb02c43d213225bb43c47b3b43ad73R45
The interface of the arguments has changed, which appears to cause this issue.

This diff is included in the latest version of the @react-aria/utils package (3.24.0).
And I was able to reproduce the issue in my environment using that version.
However, when I changed to use the previous version of the @react-aria/utils package (3.23.2), I could not reproduce the issue.

[wingkwong]

I was using 3.24.0 but still didn't see the issue. please provide a stackblitz link for us to investigate.

[xylish7]

I also encountered this error, but I'm still looking into how to reproduce it. It seems that the error was triggered when I added a new nextui package (the accordion one).

When I removed the router from NextUIProvider, everything worked ok.
Also, when I removed the package and also the changes made to package-lock.json and ran npm i, everything worked as before (even when using the router in NextUIProvider)

[xylish7]

These are my current dependencies and everything works ok when passing router to NextUIProvider.

If I update for example @nextui-org/avatar to latetest version (2.0.27). Everything works ok.
However, if I add a @nextui-org/accordion or @nextui-org/select or upgrade @nextui-org/button to latest version (2.0.31), I will get the same error.

"dependencies": {
    "@nextui-org/avatar": "2.0.24",
    "@nextui-org/button": "2.0.27",
    "@nextui-org/card": "2.0.24",
    "@nextui-org/checkbox": "2.0.25",
    "@nextui-org/chip": "2.0.25",
    "@nextui-org/code": "2.0.24",
    "@nextui-org/divider": "2.0.25",
    "@nextui-org/input": "2.1.17",
    "@nextui-org/kbd": "2.0.25",
    "@nextui-org/link": "2.0.26",
    "@nextui-org/navbar": "2.0.27",
    "@nextui-org/popover": "2.1.15",
    "@nextui-org/snippet": "2.0.31",
    "@nextui-org/switch": "2.0.25",
    "@nextui-org/system": "2.0.15",
    "@nextui-org/tabs": "2.0.26",
    "@nextui-org/theme": "2.1.18",
    "@nextui-org/tooltip": "2.0.30",
    "@react-aria/ssr": "3.9.2",
    "@react-aria/visually-hidden": "3.8.10",
    "@types/node": "20.12.7",
    "@types/react": "18.2.76",
    "@types/react-dom": "18.2.25",
    "autoprefixer": "10.4.19",
    "bright": "0.8.5",
    "clsx": "2.1.0",
    "dayjs": "1.11.10",
    "framer-motion": "11.0.28",
    "gray-matter": "4.0.3",
    "next": "14.2.0",
    "next-mdx-remote": "4.4.1",
    "next-themes": "0.2.1",
    "phosphor-react-sc": "1.0.0",
    "postcss": "8.4.38",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "rehype-autolink-headings": "7.1.0",
    "rehype-slug": "6.0.0",
    "remark-gfm": "3.0.1",
    "sass": "1.74.1",
    "tailwind-variants": "0.2.1",
    "tailwindcss": "3.4.3",
    "typescript": "5.4.5"
  },
  "devDependencies": {
    "@fec/remark-a11y-emoji": "4.0.2",
    "@typescript-eslint/eslint-plugin": "7.6.0",
    "@typescript-eslint/parser": "7.6.0",
    "eslint": "8.57.0",
    "eslint-config-next": "14.2.0",
    "favicons": "7.2.0"
  }

[xylish7]

The error can be reproduced here: https://stackblitz.com/edit/stackblitz-starters-dkwe9f?file=README.md

[wingkwong]

The fix will be available in the next release. 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";

[hkmute]

Is the fix released in 2.4? Path is still undefined in NextUIProvider navigate argument after upgrading

[wingkwong]

@hkmute please remove your node_modules, and reinstall 2.4.1. If it still fails, please share a stackblitz project.

[hkmute]

@hkmute please remove your node_modules, and reinstall 2.4.1. If it still fails, please share a stackblitz project.

@wingkwong https://stackblitz.com/~/github.com/hkmute/remix-nextui?file=app/root.tsx

[wingkwong]

@hkmute after digging a bit, i could see this issue only when I use npm. it works fine with pnpm.