vercel/next.js · error

"onMouseEnter" was passed to <Link> with `href` of `${format

Error message

"onMouseEnter" was passed to <Link> with `href` of `${formattedHref}` but "legacyBehavior" was set. The legacy behavior requires onMouseEnter be set on the child of next/link

What it means

Error ""onMouseEnter" was passed to <Link> with `href` of `${formattedHref}` but "legacyBehavior" was set. The legacy behavior requires onMouseEnter be set on the child of next/link" thrown in vercel/next.js.

Source

Thrown at packages/next/src/client/app-dir/link.tsx:567

  }

  // This will return the first child, if multiple are provided it will throw an error
  let child: any
  if (legacyBehavior) {
    if ((children as any)?.$$typeof === Symbol.for('react.lazy')) {
      throw new Error(
        `\`<Link legacyBehavior>\` received a direct child that is either a Server Component, or JSX that was loaded with React.lazy(). This is not supported. Either remove legacyBehavior, or make the direct child a Client Component that renders the Link's \`<a>\` tag.`
      )
    }

    if (process.env.NODE_ENV === 'development') {
      if (onClick) {
        console.warn(
          `"onClick" was passed to <Link> with \`href\` of \`${formattedHref}\` but "legacyBehavior" was set. The legacy behavior requires onClick be set on the child of next/link`
        )
      }
      if (onMouseEnterProp) {
        console.warn(
          `"onMouseEnter" was passed to <Link> with \`href\` of \`${formattedHref}\` but "legacyBehavior" was set. The legacy behavior requires onMouseEnter be set on the child of next/link`
        )
      }
      try {
        child = React.Children.only(children)
      } catch (err) {
        if (!children) {
          throw new Error(
            `No children were passed to <Link> with \`href\` of \`${formattedHref}\` but one child is required https://nextjs.org/docs/messages/link-no-children`
          )
        }
        throw new Error(
          `Multiple children were passed to <Link> with \`href\` of \`${formattedHref}\` but only one child is supported https://nextjs.org/docs/messages/link-multiple-children` +
            (typeof window !== 'undefined'
              ? " \nOpen your browser's console to view the Component stack trace."
              : '')
        )
      }

View on GitHub (pinned to 0eb3775416)

Solutions

1. With legacyBehavior, put onMouseEnter on the child <a> element, or remove legacyBehavior.

When it happens

Trigger: Thrown at packages/next/src/client/app-dir/link.tsx:567 when the library encounters an invalid state.

Common situations: See trigger scenarios.

AI-assisted analysis of vercel/next.js@0eb3775416 (2026-08-19). Data as JSON: /api/errors/77c4fca48a278f2a. Report an issue: GitHub.