useHref error with react router v7

[rattermeyer]

I am currently migrating an app from remix 2 to react router v7.

I have, unfortunately only sometimes, at least in dev mode, .... I get the error:

useHref() may be used only in the context of a component.

Using

• remix-hook-form 6.1.2
• react-router 7.1.1

The following route / component:

export default function HrefTest({ loaderData }: Route.ComponentProps) {
    const basename = useHref('/');
    const form = useRemixForm<FormData>({resolver});
    return (
        <div>
            <h1>Test</h1>
        </div>
    );
}

throws the error in useRemixForm not the line above.

[rattermeyer]

As a help, here the component hierarchy:

[markoremus]

I've the exact same issue - after migrating from remix 2 to rr7 my app is crashing with the following error:

useHref() may be used only in the context of a component.

I'm using the following versions:

• remix-hook-form 6.1.2
• react-router 7.1.1
• vite 6.0.7

[sheepsteak]

It seems that this is an upstream issue in React Router - remix-run/react-router#12475.

I've managed to fix it for myself in the time being by removing all the module-sync declarations in the exports of each React Router package I'm using:

https://github.com/remix-run/react-router/blob/b4a37a8be273e88e3f6469e64865ca25416a16ce/packages/react-router/package.json#L28

You could use something like patch-package for now to remove them until React Router push a fix. Although, as I'm writing this I just saw they've merged a fix (remix-run/react-router#12729) and it's available in 7.1.2-pre.0. Will try it out and report back.

EDIT: React Router 7.1.2-pre.0 seems to fix it for me 🎉

[markoremus]

@sheepsteak: thanks for your feedback! I can confirm using the react router pre-release (7.1.2-pre.0) seems to have fixed the issue.

[AlemTuzlak]

This indeed is an issue with react-router that they have been working on for a few weeks now, if it wasn't for useHref it would complain about useSubmit as it doesn't properly de-dupe dependencies.

[rattermeyer]

Thanks a lot for the explanation.