Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

docs: manual client injection examples reference removed exports

Open Beginner friendly
#589 1 comment 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
74/100
Issue type
Documentation
Clarity
Mostly clear
Activity status
Active
Tech stack
javascript
Domain
documentation

Research direction

Read the Getting Started section for projects without an HTML entry and the Client Script & Client Context page, then review commit 352456fb for the migration to @devframes/hub-ui. Update both pages to use the current /__devtools/embedded.js entry, document its hosting and connection requirements, and synchronize the visibility-mode examples; done means the old injection exports are no longer referenced.

Written by the indexing model from the issue text.

Description

Describe the bug

The manual client injection documentation still tells users to import @vitejs/devtools/client/inject, although that entry was removed when Vite DevTools adopted the @devframes/hub-ui client.

Affected pages:

This matters for backend-served HTML, middleware integrations, and JavaScript-only entries where automatic HTML injection does not run. Following the documented import fails during module resolution, before the client can initialize.

The @ts-expect-error comment in the guide addresses missing type declarations; it cannot suppress this module-resolution failure.

Reproduction

Using the published package, without building DevTools from source:

mkdir devtools-manual-injection-repro
cd devtools-manual-injection-repro
pnpm init
pnpm add -D -E [email protected] @vitejs/[email protected]
node --input-type=module -e "console.log(import.meta.resolve('@vitejs/devtools/client/inject'))"

Actual result:

ERR_PACKAGE_PATH_NOT_EXPORTED
Package subpath './client/inject' is not defined by "exports"

This is also reproducible through Vite with DevTools explicitly enabled. Create check.mjs:

import { createServer } from 'vite'
import { DevTools } from '@vitejs/devtools'
import { writeFile } from 'node:fs/promises'

await writeFile('old.js', "import '@vitejs/devtools/client/inject'\n")
const server = await createServer({
  configFile: false,
  plugins: await DevTools({ builtinDevTools: false }),
  server: { host: '127.0.0.1', port: 5173, strictPort: true },
  devtools: { open: false },
})

try {
  await server.listen()
  await server.transformRequest('/old.js')
}
finally {
  await server.close()
}

Run node check.mjs. The Vite transformation fails with:

"./client/inject" is not exported under the conditions
["module", "browser", "development", "import"]

The published package also does not export ./client/inject-passive or ./client/inject-hidden, both of which are still shown in the guide.

Migration evidence

Commit 352456fb in #529 removed the old client directory and the three injection exports, added @devframes/hub-ui, and changed injection to load the hub-served /__devtools/embedded.js script.

The capability still exists. I verified a backend-served HTML page that loads this script through a same-origin HTTP/WebSocket proxy to Vite: after authorization, the dock appeared and the Settings panel opened. This verifies that setup, not arbitrary cross-origin configurations.

Expected behavior

Please update the manual integration instructions to describe the current supported entry and its hosting/connection requirements, and synchronize the client-context explanation and visibility-mode examples.

The request is to retain and update the manual integration guidance. It does not require restoring the removed npm exports or deleting support for backend-served pages.

Environment
  • vite: 8.3.0
  • @vitejs/devtools: 0.7.5
  • Package manager: pnpm
  • Reproduced on macOS using published packages.
Dominant language
TypeScript
Stars
1.2k
Forks
91
Avg merge
1d 3h
Merged PRs (30d)
21

Getting set up

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.

More from vitejs/devtools

All issues in vitejs/devtools

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.