vuejs / vuejs/devtools

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'app')

Open
#922 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
2.9k
Forks
279
PR merge metrics
No merged PRs in 30d

Description

We develop a Vue app, which is provided as a web component for production usage.
The component is integrated in a tab layout, the web component is instantiated when the tab is opened, the web component is disconnected when the tab is closed and the Vue app is also unmounted in this context.
When a tab containing the web components is closed for the first time, the following error occurs. When reopening a tab that contains the web component, the error always occurs from now on. The communication between the web component and the tab layout no longer works, the functionality is no longer fully available. The Vue app in the web component itself is still functional.
The Dev Tools are not part of the (prod) build, they are installed as a browser extension. If the dev tools are deactivated in the browser, the error no longer occurs and everything works as expected.

prepare.js:1 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'app')
    at Object.get (prepare.js:1:41156)
    at prepare.js:1:70195
    at prepare.js:1:33620
    at prepare.js:1:33612

which leads to

, I = new Proxy(u.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD__,{
  get(t, e, o) {
    return e === "value" ? u.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD__ : e === "id" ? u.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD_ID__ : u.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD__[e]
  }
...

e seems to be undefined.

Browser: Chrome
Version: 137.0.7151.120
Vue Dev Tools: 7.7.7

Contributor guide

No contributing guide indexed for this repository

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

Reproduce the failure in Chrome 137 with Vue Dev Tools 7.7.7 using a Vue web component that is mounted and unmounted as tabs open and close. Start from the prepare.js stack trace and the VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD proxy shown in the report. Done means repeated tab reopening no longer produces the TypeError and communication remains functional with the DevTools extension enabled.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
devtools
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.