Related plugins

• plugin-react

• plugin-react-swc

• plugin-react-oxc

• plugin-rsc

Describe the bug

If using a hook that is referenced using two times dot-notation, the state will always reset upon saving a file; e.g:

const useTrue = () => {
  return true
}
const obj1 = {
  useTrue,
  obj2: { useTrue },
}

function App() {
  const [count, setCount] = useState(0)
  
  // will preserve the state
  const t1 = useTrue();
  // will also preserve the state
  const t2 = obj1.useTrue();
  // this will cause the state to always reset
  const t3 = obj1.obj2.useTrue();

  useEffect(() => {
    const interval = setInterval(() => setCount(c => c + 1), 1000);
    return () => { clearInterval(interval); }
  }, []);
  return <>{count}</>
}

It doesn't appear to be an issue in react-plugin-swc

Reproduction

https://github.com/adamschoenemann/vite-hmr-bug

Steps to reproduce

• Use any hook defined inside two levels of nested objects.
• Save the file and save it again: the second save should not reset the state, but it does

System Info

I couldn't get `envinfo` to install (got a 500 from npm, there's a cloudflare outage I think). But here is an `npm ls` from the repro repo:


├── @eslint/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @vitejs/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

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.