vuejs / vuejs/core

Functional component crashes on vue/compat

Open
#9,873 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

scope: v2 compat
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
  1. Use @vue/compat, specifically the @vue/compat/dist/vue.esm-bundler.js.

  2. Create functional component

  3. Use functional component from step 2 on another component. Include a router navigation away from the current route to force dismounting the current component.

  4. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.