Fast Refresh not working with hooks returning JSX/TSX

[mpressmar]

Describe the bug

We are frequently using custom hooks that will return rendering callbacks in which we refer to actual tsx components.

Is this a bug, or is there any alternative for defining component-based hooks which doesn't break HMR?

Reproduction

https://stackblitz.com/edit/vitejs-vite-zzqhfn?file=src%2Fhook.jsx

Steps to reproduce

A simple example:

hook.tsx

import { useCallback } from "react";

export const useExampleHook = () => {
    return useCallback(() => <span>Test</span>, []);
}

If you use this hook in a component, and then modify the hook's source code, the following will be printed in the console:

5:03:45 PM [vite] hmr invalidate /src/hook.tsx Could not Fast Refresh. Learn more at https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#consistent-components-exports

System Info

Linux Mint, Firefox, Vite 5.2.11, latest vite react plugin

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[ArnaudBarre]

This is a duplicate of #289, but thanks for the small repro I'll look into it I didn't though it was that easy to trigger