NavigationMenuTrigger must be used within NavigationMenu and other errors.

[Cigoler]

<NavigationMenu>
        <NavigationMenuList>
          <NavigationMenuItem>
            <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
            <NavigationMenuContent>
              <NavigationMenuLink>Link</NavigationMenuLink>
            </NavigationMenuContent>
          </NavigationMenuItem>
        </NavigationMenuList>
</NavigationMenu>

Using the default example code I get the following error in a an Astro project:

error   `NavigationMenuTrigger` must be used within `NavigationMenu`
  File:
    /home/project/node_modules/@radix-ui/react-context/dist/index.mjs:55:19
  Code:
    54 |             if (defaultContext !== undefined) return defaultContext; // if a defaultContext wasn't specified, it's a required context.
    > 55 |             throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
         |                   ^
      56 |         }
      57 |         Provider.displayName = rootComponentName + 'Provider';
      58 |         return [
  Stacktrace:
Error: `NavigationMenuTrigger` must be used within `NavigationMenu`
    at useContext (file:///home/project/node_modules/@radix-ui/react-context/dist/index.mjs:55:19)
    at file:///home/project/node_modules/@radix-ui/react-navigation-menu/dist/index.mjs:294:21
    at renderWithHooks (/home/project/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5662:16)
    at renderForwardRef (/home/project/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5846:18)
    at renderElement (/home/project/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6009:11)
    at renderNodeDestructiveImpl (/home/project/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
    at renderNodeDestructive (/home/project/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
    at renderForwardRef (/home/project/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5863:5)
    at renderElement (/home/project/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6009:11)
    at renderNodeDestructiveImpl (/home/project/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)

I also get a similar error with the dialog component, other components like Card and Button are working fine but come unstuck with these two and wondering if it's something I've done or if there's a bug.

[shadcn]

The code above looks fine. Can you share a link to the repo or provide a reproduction so that I can debug? Thank you.

[Cigoler]

https://github.com/Cigoler/product-catalog

Not sure if this is how to add a reproduction or not, but this is what I was working with - I should add that maybe there's a discrepancy between the way astro and shadcn create the tailwind configs because I ended up with two and ended up having to delete one - but could just be me being a doofus.

[therealsujitk]

@Cigoler I haven't looked at your code, but I faced a very similar issue with Astro and the reason for this is Astro's island architecture. This guide explains the problem and how to resolve it quite well.

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.