Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

docs: manual client injection examples reference removed exports

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#589 1 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
74/100
Loại issue
Tài liệu
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
javascript
Lĩnh vực
documentation

Hướng nghiên cứu

Đọc phần Getting Started dành cho các dự án không có mục nhập HTML và trang Client Script & Client Context, sau đó xem lại commit 352456fb về việc chuyển sang @devframes/hub-ui. Cập nhật cả hai trang để sử dụng mục nhập /__devtools/embedded.js hiện tại, ghi lại các yêu cầu về việc lưu trữ và kết nối của mục nhập này, đồng bộ hóa các ví dụ về chế độ hiển thị; hoàn tất khi các injection exports cũ không còn được tham chiếu.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.
Ngôn ngữ chính
TypeScript
Star
1.2k
Fork
91
Merge trung bình
1 ngày 3 giờ
Pull request đã merge (30 ngày)
21

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của vitejs/devtools

Tất cả issue của vitejs/devtools

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.