nuxt / nuxt/devtools

fix: Devtools timeline breaks function key injection

Open
#941 2 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
3.3k
Forks
214
Avg merge
13h 22m
Merged PRs (30d)
18

Description

🐛 The bug

When devtools.timeline.enabled is set to true, composables that rely on automatic key injection (useState, callOnce) fail at runtime due to the functions being wrapped in __nuxtTimelineWrap, which replaces the original import with a local variable declaration.

// example
const useState = __nuxtTimelineWrap("useState", _$__useState)

The keyed-functions plugin then sees a local variable instead of an import specifier and skips key injection.

first reported by @bbauti in https://github.com/nuxt/nuxt/issues/34192#issuecomment-3993534262

🛠️ To reproduce

https://stackblitz.com/edit/github-cftzb7c6-w4klleco

🌈 Expected behavior

Wrapping should ideally happen after key injection, if possible.

ℹ️ Additional context

No response

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 linked StackBlitz reproduction and trace the devtools.timeline wrapping alongside the keyed-functions plugin. Verify how __nuxtTimelineWrap changes the useState and callOnce bindings; done means automatic key injection still works and both composables run without runtime failures.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxt, typescript
Domain
devtools, tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.