[BUG] - Button Not Working With Next.js Link Component on Andorid(brave browser)

[jstbyte]

Describe the bug

TypeError: Cannot read property 'nodeName' of undefined.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

<Link href='/test'>
      <Button
        as='a'
        auto
        size='sm'
        shadow
        css={{ marginTop: '$12' }}
        onClick={() => ''}
      >
        Test Page
      </Button>
    </Link>

Expected behavior

Expected behavior is navigate to spacified page but i'm getting error: TypeError: Cannot read property 'nodeName' of undefined.

Screenshots or Videos

No response

Operating System Version

windows 10

Browser

Chrome

[jrgarciadev]

Hey @jstbyte could you please share a Codesandbox or something similar?, I couldn't replicate it

https://stackblitz.com/edit/nextjs-hln4yw?file=pages/index.js

[stale[bot]]

Hello 👋, to help manage issues we automatically close stale issues. This issue has been automatically marked as stale because it has not had activity for quite some time. Has this issue been fixed, or does it still require the community's attention? > This issue will be closed in 10 days if no further activity occurs. Thank you for your contributions.

[smartercow]

@jrgarciadev I also have the same problem with. If I wrap Button with Link from Next I get the same error. Link and Button works on their own.

[jrgarciadev]

Hey @smartercow, @jstbyte could you try this way?:

import { Button } from "@nextui-org/react";
import Link from "next/link";

///....
<Button
  auto
  shadow
  as={Link}
  size='sm'
  href="/test"
  css={{ marginTop: '$12' }}
  onPress={() => console.log('pressed')}
>
 <a>
     Test Page
  </a>
</Button>

[creazy231]

The above example results in Error: Multiple children were passed to <Link> with `href` of `/register` but only one child is supported. Facing the same issue for all links I want to display as buttons.

[BenSwitzerHavas]

Hi @jrgarciadev,

I too am getting the same issues as @jstbyte and @creazy231.

I've tried the following:

import Link from 'next/link';
import { Button } from '@nextui-org/react';

<Link href='/test'>
<Button as='a'>
    Test Page
</Button>
</Link>

See the following error: TypeError: Cannot read properties of undefined (reading 'nodeName')

and

import Link from 'next/link';
import { Button } from '@nextui-org/react';

<Button
  as={Link}
  href="/test"
>
 <a>
     Test Page
  </a>
</Button>

See the following error: Error: Multiple children were passed to <Link> with href of some-url but only one child is supported

Lastly I tried:

import Link from 'next/link';
import { Button } from '@nextui-org/react';

<Link href='/test' passHref>
<Button as='a'>
    Test Page
</Button>
</Link>

Getting the same results as the first example.

My package.json contains the following: "@nextui-org/react": "*", "next": "12.3.1", "react": "18.2.0", "react-dom": "18.2.0"

[leogilmour]

import { Button, Link } from "@nextui-org/react";
import { default as NextLink } from "next/link";

<NextLink href={href} passHref>
      <Button
        as={Link}
      >
        Sign in
      </Button>
    </NextLink>

results in: TypeError: Cannot read properties of undefined (reading 'nodeName') briefly flashing before navigating. I think the flash only occurs on first navigation from a new page.

"@nextui-org/react": "*", ("1.0.0-beta.10",)
"next": "12.2.5",
"react": "18.2.0",
"react-dom": "18.2.0",

[rolznz]

The above isn't just on Android, it's on Windows Chrome too.

This is a common usecase (button that opens a link).

[rolznz]

It looks like as a temporary fix you can do: (note e?. required for clicking the button again after navigating back, it seems like the event is not always available)

import { Button, Link } from "@nextui-org/react";
import { default as NextLink } from "next/link";
<NextLink href={Routes.withdraw} passHref>
  <Button as="a" onClick={(e) => { e?.preventDefault();}}>
    Test
  </Button>
</NextLink>

[gBoole01]

Issue is stale but for anyone that couldn't apply the workaround of @rolznz, here is mine.

If the Link is internal we can just attach a callback function on the onPress event with the router from next/router like this

import { useRouter } from 'next/router'

const router = useRouter()

<Button onPress={() => router.push('/some-route')}>
          Dummy button
</Button>

Hope this helps !

[jrgarciadev]

Hey guys sorry for the delay please upgrade to V2.