Functional component crashes on vue/compat
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 54.4k
- Forks
- 9.2k
- Avg merge
- 1d 5h
- Merged PRs (30d)
- 140
Description
Vue version
3.3.13
Link to minimal reproduction
https://github.com/gmoneh/Vue3_Migration
Steps to reproduce
-
Use @vue/compat, specifically the @vue/compat/dist/vue.esm-bundler.js.
-
Create functional component
-
Use functional component from step 2 on another component. Include a router navigation away from the current route to force dismounting the current component.
-
Upon dismounting, an exception occurs on line 9471 pf vue.esm-bundler.js: "TypeError: Cannot read properties of null (reading 'type')"
if (!!(process.env.NODE_ENV !== "production") && instance.type.__hmrId) {
unregisterHMR(instance);
}
For a functional component, above is null, so the dereferencing of the type property causes this exception.
What is expected?
The current component would unmount and navigation would occur to the new route.
What is actually happening?
The exception mentioned above prevents the unmounting from completing, and therefore navigation does not occur.
System Info
No response
Any additional comments?
On the given repository, navigate to the page http://localhost:5173/Features/Portal/index.html, This page has some router links at the top, click on the second one and watch the javascript console to see the error.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the functional-component unmount path in @vue/compat/dist/vue.esm-bundler.js around the reported HMR cleanup line, then reproduce the failure using the linked Vue3_Migration project and its router navigation. Done means navigating away from the functional component completes without the null-type exception and the destination route loads.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100