yelping-magenta•4mo ago

Example with NX, Vite, React Router & Chakra UI

Hi! I'd like to start building our company's new CRM with Refine within an NX monorepo . I've tried to get this example running: https://github.com/refinedev/refine/tree/master/examples/auth-chakra-ui, but I get the error:

Uncaught Error: useLocation() may be used only in the context of a <Router> component.
    at invariant (@refinedev_react-router-v6.js?v=48eae912:806:11)
    at useLocation (@refinedev_react-router-v6.js?v=48eae912:1293:34)
    at parse (@refinedev_react-router-v6.js?v=48eae912:2565:53)
    at useParse (chunk-ZT2JZPDT.js?v=48eae912:9476:132)
    at useParsed (chunk-ZT2JZPDT.js?v=48eae912:9479:11)
    at Authenticated (chunk-ZT2JZPDT.js?v=48eae912:10274:121)
    at renderWithHooks (chunk-ECX7LEHP.js?v=48eae912:12171:26)
    at mountIndeterminateComponent (chunk-ECX7LEHP.js?v=48eae912:14921:21)
    at beginWork (chunk-ECX7LEHP.js?v=48eae912:15902:22)
    at HTMLUnknownElement.callCallback2 (chunk-ECX7LEHP.js?v=48eae912:3674:22)

Uncaught Error: useLocation() may be used only in the context of a <Router> component.
    at invariant (@refinedev_react-router-v6.js?v=48eae912:806:11)
    at useLocation (@refinedev_react-router-v6.js?v=48eae912:1293:34)
    at parse (@refinedev_react-router-v6.js?v=48eae912:2565:53)
    at useParse (chunk-ZT2JZPDT.js?v=48eae912:9476:132)
    at useParsed (chunk-ZT2JZPDT.js?v=48eae912:9479:11)
    at Authenticated (chunk-ZT2JZPDT.js?v=48eae912:10274:121)
    at renderWithHooks (chunk-ECX7LEHP.js?v=48eae912:12171:26)
    at mountIndeterminateComponent (chunk-ECX7LEHP.js?v=48eae912:14921:21)
    at beginWork (chunk-ECX7LEHP.js?v=48eae912:15902:22)
    at HTMLUnknownElement.callCallback2 (chunk-ECX7LEHP.js?v=48eae912:3674:22)

Any idea what could be the problem?

2 Replies

kapa.ai•4mo ago

Hi @doender. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hmm, I don't know enough to give you a confident answer yet. The error message you're seeing typically occurs when a React Router hook is used outside of a component that's within a <Router> component. However, without seeing your code, it's hard to diagnose the exact issue. The knowledge sources provided don't include an example with NX, Vite, React Router, and Chakra UI. However, they do include various examples of using Refine with Chakra UI. You might find these examples helpful as a reference: - Base Chakra UI Example (https://github.com/refinedev/refine/blob/master/examples/base-chakra-ui/README.md) - Form Chakra UI Use Form Example (https://github.com/refinedev/refine/blob/master/examples/form-chakra-ui-use-form/README.md) - Theme Chakra UI Demo Example (https://github.com/refinedev/refine/blob/master/examples/theme-chakra-ui-demo/README.md) - Table Chakra UI Basic Example (https://github.com/refinedev/refine/blob/master/examples/table-chakra-ui-basic/README.md) - Inferencer Chakra UI Example (https://github.com/refinedev/refine/blob/master/examples/inferencer-chakra-ui/README.md) - Tutorial Chakra UI Example (https://github.com/refinedev/refine/blob/master/examples/tutorial-chakra-ui/README.md) - Upload Chakra UI Basic64 Example (https://github.com/refinedev/refine/blob/master/examples/upload-chakra-ui-basic64/README.md) You can try these examples on your local machine by running the command npm create refine-app@latest -- --example [example-name]. For more detailed help, I recommend checking out the Refine documentation (https://refine.dev/docs/) or reaching out to the Refine community on Discord (https://discord.gg/refine). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@795674877843210270> kapa.ai is still learning and improving, please let us know how it did by reacting below