feat(deps): migrate antdv to antdv-next #7347
Conversation
ffgenius
requested review from
a team,
anncwb,
jinmao88,
mynetfan and
vince292007
as code owners
|
📝 WalkthroughWalkthroughThis PR replaces ant-design-vue with antdv-next across the web-antd app: package and workspace entries, imports, component adapters, locale and message/notification usage, and updates API shapes (e.g., visible→open, onVisibleChange→onOpenChange, message→title). Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Fix all issues with AI agents
In `@apps/web-antd/package.json`:
- Line 44: The project added the antdv-next dependency but its global styles
aren't imported; open bootstrap.ts, locate the existing import for
"@vben/styles/antd" and immediately after it add explicit imports for
antdv-next's styles (the reset and component CSS) so the UI components render
correctly; ensure the two imports are placed near the top of bootstrap.ts
alongside other global style imports to guarantee they are bundled.
In `@apps/web-antd/src/views/demos/antd/index.vue`:
- Around line 26-32: The notification config passed in notify(type:
NotificationType) incorrectly includes a redundant type property; remove the
type field from the object passed to notification[type] so the method call
(notification[type](...)) drives the notification type and the config only
contains duration and title; update the notify function (and any similar calls
using notification and NotificationType) to stop passing type in the config
object.
In `@pnpm-workspace.yaml`:
- Line 75: The pinned dependency antdv-next (^1.0.0-rc.8) is ESM-only and
requires consumers to use ESM and modern TS resolution; verify all downstream
packages that consume antdv-next can run as ESM (or migrate them), replace or
pin to a CJS-compatible release if any consumer must remain CommonJS, and update
TypeScript configs (tsconfig.json) for affected packages to use
moduleResolution: "Node16" / "NodeNext" or "Bundler" so .d.mts types resolve;
also audit import sites to only use supported export subpaths (e.g.,
antdv-next/date-picker, antdv-next/locale) rather than undocumented deep
imports.
🧹 Nitpick comments (2)
apps/web-antd/src/adapter/component/index.ts (2)
378-379: Component name hardcoded to'AUpload'.The component name was changed from
Upload.nameto the hardcoded string'AUpload'. This is acceptable if antdv-next's Upload component doesn't expose a stable.nameproperty, but verify this is intentional.
38-101: Refactor to use top-level imports instead of internal dist paths.The code already uses top-level imports (
import { message, Modal, notification } from 'antdv-next') on lines 8 and 36, but the async component definitions on lines 38–101 use internalantdv-next/dist/*/indexpaths. While these dist paths are supported via the package's exports map, the official guidance recommends using the main entry point for all components:import { Button } from 'antdv-next'with dynamic imports for async loading. This maintains consistency within the file and aligns with the library's public API contract.
| "@vben/utils": "workspace:*", | ||
| "@vueuse/core": "catalog:", | ||
| "ant-design-vue": "catalog:", | ||
| "antdv-next": "catalog:", |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
antdv-next npm package peer dependencies
💡 Result:
As of antdv-next@1.0.0-rc.8, the package does not declare any peerDependencies (there is no peerDependencies field in its published package.json). [1]
You can confirm on your machine with:
npm info antdv-next@1.0.0-rc.8 peerDependenciesSource: [1]
🌐 Web query:
antdv-next library ant design vue style imports
💡 Result:
antdv-next ships a global bundled stylesheet plus per-component style modules.
1) Import all styles (simplest)
Add these once (e.g., main.ts):
import 'antdv-next/dist/reset.css'
import 'antdv-next/dist/antd.css'Both files are published and exported by the package. (cdn.jsdelivr.net)
2) “On-demand” / per-component styles
Each component has its own style/index.mjs under dist/<component>/style/ (e.g. dist/button/style/index.mjs). When you import components in a tree-shakeable way, bundlers can pull only what you use, and these style modules are JS (css-in-js), not .css files. (cdn.jsdelivr.net)
Citations:
- 1: https://cdn.jsdelivr.net/npm/antdv-next%401.0.0-rc.8/dist/
- 2: https://cdn.jsdelivr.net/npm/antdv-next%401.0.0-rc.8/dist/button/
🏁 Script executed:
# First, let's examine the package.json file to understand the context
cat -n apps/web-antd/package.json | head -60Repository: vbenjs/vue-vben-admin
Length of output: 1834
🏁 Script executed:
# Check for any monorepo catalog configuration
find . -type f -name "package.json" -o -name "pnpm-workspace.yaml" -o -name "lerna.json" | head -10Repository: vbenjs/vue-vben-admin
Length of output: 449
🏁 Script executed:
# Check for pnpm-workspace or root package.json that defines the catalog
find . -maxdepth 2 -type f \( -name "pnpm-workspace.yaml" -o -name ".pnpmfile.cjs" \)Repository: vbenjs/vue-vben-admin
Length of output: 86
🏁 Script executed:
# Check root package.json for catalog configuration
cat -n package.json | head -100Repository: vbenjs/vue-vben-admin
Length of output: 4310
🏁 Script executed:
# Search for antdv-next style imports in the codebase
rg "antdv-next.*css|import.*antdv-next.*dist" --type ts --type vue --type js -B 2 -A 2Repository: vbenjs/vue-vben-admin
Length of output: 92
🏁 Script executed:
# Check main entry point and style configuration in web-antd app
find apps/web-antd/src -type f \( -name "main.ts" -o -name "main.js" -o -name "App.vue" \) | head -5Repository: vbenjs/vue-vben-admin
Length of output: 90
🏁 Script executed:
# Check main.ts for existing style imports
cat -n apps/web-antd/src/main.tsRepository: vbenjs/vue-vben-admin
Length of output: 1044
🏁 Script executed:
# Check pnpm-workspace.yaml for catalog configuration
cat -n pnpm-workspace.yamlRepository: vbenjs/vue-vben-admin
Length of output: 6734
🏁 Script executed:
# Search for any antd/antdv style imports in the entire web-antd app
rg "antd.*css|reset\.css" apps/web-antd/src --type ts --type js -B 2 -A 2Repository: vbenjs/vue-vben-admin
Length of output: 47
🏁 Script executed:
# Look for common entry point files that might import styles
find apps/web-antd/src -type f \( -name "*.ts" -o -name "*.tsx" -o -name "*.vue" \) | xargs grep -l "import.*css\|import.*antd" | head -10Repository: vbenjs/vue-vben-admin
Length of output: 448
🏁 Script executed:
# Check bootstrap.ts and app.vue for style imports
cat apps/web-antd/src/bootstrap.ts | head -50Repository: vbenjs/vue-vben-admin
Length of output: 1271
🏁 Script executed:
cat apps/web-antd/src/app.vue | head -50Repository: vbenjs/vue-vben-admin
Length of output: 890
🏁 Script executed:
# Also check if there's a global style configuration in vite config
find apps/web-antd -type f \( -name "vite.config.*" -o -name "vitest.config.*" \)Repository: vbenjs/vue-vben-admin
Length of output: 94
🏁 Script executed:
# Check if `@vben/styles` handles antdv-next styles
find packages -name "styles" -type d | head -5Repository: vbenjs/vue-vben-admin
Length of output: 80
🏁 Script executed:
# Look at the styles package structure
ls -la packages/@core/styles/ 2>/dev/null || ls -la packages/styles/ 2>/dev/null || find . -path "*/packages/*styles*" -type d | head -3Repository: vbenjs/vue-vben-admin
Length of output: 413
🏁 Script executed:
# Check the vite config to see if there's any style configuration
cat apps/web-antd/vite.config.mts | head -80Repository: vbenjs/vue-vben-admin
Length of output: 491
🏁 Script executed:
# Check what `@vben/styles/antd` exports/contains
find packages/styles/src -type f | head -20Repository: vbenjs/vue-vben-admin
Length of output: 236
🏁 Script executed:
# Check the antd styles specifically
cat packages/styles/src/index.ts 2>/dev/null || find packages/styles -name "*.ts" -o -name "*.css" | head -10Repository: vbenjs/vue-vben-admin
Length of output: 92
🏁 Script executed:
# List all files in the styles package
ls -la packages/styles/src/Repository: vbenjs/vue-vben-admin
Length of output: 444
🏁 Script executed:
# Check what's in the antd styles file
cat packages/styles/src/antd/index.cssRepository: vbenjs/vue-vben-admin
Length of output: 1436
🏁 Script executed:
# Find the `@vben-core/design` package
find . -path "*vben-core*design*" -o -path "*design*" -type d | grep -E "packages|src" | head -10Repository: vbenjs/vue-vben-admin
Length of output: 403
🏁 Script executed:
# Check the structure to find where `@vben-core/design` is
find packages -name "design" -type dRepository: vbenjs/vue-vben-admin
Length of output: 91
🏁 Script executed:
# Check the design package content
find packages/@core/base/design -type f | head -20Repository: vbenjs/vue-vben-admin
Length of output: 684
🏁 Script executed:
# Check if design package handles antdv-next styles
cat packages/@core/base/design/package.json | head -30Repository: vbenjs/vue-vben-admin
Length of output: 829
🏁 Script executed:
# Look for antdv-next style imports in design package
find packages/@core/base/design -type f -name "*.ts" -o -name "*.css" -o -name "*.scss" | xargs grep -l "antdv-next\|reset\.css\|antd\.css" 2>/dev/nullRepository: vbenjs/vue-vben-admin
Length of output: 49
🏁 Script executed:
# Check what the design package index.ts imports
cat packages/@core/base/design/src/index.tsRepository: vbenjs/vue-vben-admin
Length of output: 202
🏁 Script executed:
# Check the ui.css file to see if it imports antdv styles
cat packages/@core/base/design/src/css/ui.cssRepository: vbenjs/vue-vben-admin
Length of output: 1524
🏁 Script executed:
# Verify what antdv-next components are being used
rg "from ['\"]antdv-next" apps/web-antd/src --type ts --type js -B 1 -A 1 | head -30Repository: vbenjs/vue-vben-admin
Length of output: 1518
🏁 Script executed:
# Check if maybe antdv-next styles are imported dynamically somewhere
rg "antdv-next.*css|reset.*css|dist.*antd" apps/web-antd --type ts --type jsRepository: vbenjs/vue-vben-admin
Length of output: 47
Add antdv-next stylesheets to avoid missing component styles.
Line 44 introduces antdv-next, but its bundled stylesheets are not imported. Add the following to bootstrap.ts (after or near the existing @vben/styles/antd import):
import 'antdv-next/dist/reset.css';
import 'antdv-next/dist/antd.css';antdv-next ships with required global reset and component styles that must be explicitly imported for proper rendering. (Note: antdv-next has no peer dependencies, so dependency verification is not needed.)
🤖 Prompt for AI Agents
In `@apps/web-antd/package.json` at line 44, The project added the antdv-next
dependency but its global styles aren't imported; open bootstrap.ts, locate the
existing import for "@vben/styles/antd" and immediately after it add explicit
imports for antdv-next's styles (the reset and component CSS) so the UI
components render correctly; ensure the two imports are placed near the top of
bootstrap.ts alongside other global style imports to guarantee they are bundled.
| function notify(type: NotificationType) { | ||
| notification[type]({ | ||
| duration: 2500, | ||
| message: '说点啥呢', | ||
| title: '说点啥呢', | ||
| type, | ||
| }); | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, locate and examine the file
fd "index.vue" -p apps/web-antd/src/views/demos/antd/Repository: vbenjs/vue-vben-admin
Length of output: 109
🏁 Script executed:
# Check the file content around the lines mentioned
cat -n apps/web-antd/src/views/demos/antd/index.vue | head -40Repository: vbenjs/vue-vben-admin
Length of output: 1190
🏁 Script executed:
# Search for antdv-next notification usage in the codebase
rg "notification\." -A 3 -B 1 --type vue --type ts --type js | head -100Repository: vbenjs/vue-vben-admin
Length of output: 92
🏁 Script executed:
# Search for notification usage patterns more broadly
rg "notification\." -A 3 -B 1 | head -150Repository: vbenjs/vue-vben-admin
Length of output: 4519
🏁 Script executed:
# Check if there are any type definitions or node_modules references for antdv-next
fd "antdv-next" --type dRepository: vbenjs/vue-vben-admin
Length of output: 47
🏁 Script executed:
# Look for package.json to see antdv-next version
cat -n package.json | grep -A 5 -B 5 "antdv-next"Repository: vbenjs/vue-vben-admin
Length of output: 47
🌐 Web query:
antdv-next notification API documentation type property
💡 Result:
In antdv-next (ant-design-vue v3+) the Notification config type (NotificationArgsProps) includes a type field, but it is readonly:
type?: 'success' | 'info' | 'error' | 'warning'(akaIconType)- Because it’s readonly, it’s not meant to be set manually in
notification.open({...}); it’s set internally when you callnotification.success(...),notification.info(...),notification.warning(...), ornotification.error(...). If you want a custom icon, use theiconproperty instead. [1]
Source: ant-design-vue es/notification/index.d.ts on UNPKG. [1]
References
- [1] (app.unpkg.com)
Citations:
Remove the redundant type property from the notification config.
The type property on line 30 is redundant and incorrect. In antdv-next, the type field in the notification config is readonly and automatically set by the method call itself (e.g., notification.success(), notification.error()). Manually passing type in the config object violates the API contract. Remove type from the object:
Suggested change
function notify(type: NotificationType) {
notification[type]({
duration: 2500,
title: '说点啥呢',
});
}🤖 Prompt for AI Agents
In `@apps/web-antd/src/views/demos/antd/index.vue` around lines 26 - 32, The
notification config passed in notify(type: NotificationType) incorrectly
includes a redundant type property; remove the type field from the object passed
to notification[type] so the method call (notification[type](...)) drives the
notification type and the config only contains duration and title; update the
notify function (and any similar calls using notification and NotificationType)
to stop passing type in the config object.
pnpm-workspace.yaml
Outdated
| '@vueuse/integrations': ^14.1.0 | ||
| '@vueuse/motion': ^3.0.3 | ||
| ant-design-vue: ^4.2.6 | ||
| antdv-next: ^1.0.0-rc.8 |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
antdv-next 1.0.0-rc.8 release notes breaking changes
💡 Result:
I couldn’t find any published release notes / changelog entry for antdv-next@1.0.0-rc.8 (the npm package metadata doesn’t include a repository or homepage link that would normally point to GitHub releases/notes). (cdn.jsdelivr.net)
From the 1.0.0-rc.8 package metadata, the clearest potential breaking-change items are:
- ESM-only package: it’s published with
"type": "module"andexportspointing to.mjsentrypoints—CommonJSrequire()consumers may break and may need ESM-compatible tooling/config. (cdn.jsdelivr.net) - Stricter entrypoints via
exportsmap: consumers that rely on undocumented deep imports may break and must use only the exported subpaths (e.g.antdv-next/date-picker/*,antdv-next/locale/*, etc.). (cdn.jsdelivr.net) - TypeScript types are
.d.mts(ESM type declarations): TS projects may need modern module resolution settings (e.g. Node16/NodeNext/Bundler) if they previously relied on classic/CJS resolution. (cdn.jsdelivr.net)
If you can share the upstream repo URL (or the rc.7→rc.8 diff / changelog link you’re using), I can list the actual rc.8 breaking changes verbatim against that source.
Citations:
- 1: https://cdn.jsdelivr.net/npm/antdv-next%401.0.0-rc.8/package.json
- 2: https://cdn.jsdelivr.net/npm/antdv-next%401.0.0-rc.8/package.json
- 3: https://cdn.jsdelivr.net/npm/antdv-next%401.0.0-rc.8/package.json
- 4: https://cdn.jsdelivr.net/npm/antdv-next%401.0.0-rc.8/package.json
Address the ESM-only package transition and TypeScript resolution requirements.
Line 75 pins antdv-next to ^1.0.0-rc.8, which is an ESM-only package with .mjs entrypoints and .d.mts type declarations. This introduces breaking changes:
- CommonJS consumers will break: Projects using
require()must migrate to ESM or use ESM-compatible tooling. - Stricter import constraints: Only exports map subpaths (e.g.,
antdv-next/date-picker,antdv-next/locale) are supported; undocumented deep imports will fail. - TypeScript configuration: Requires modern module resolution (Node16, NodeNext, or Bundler) for
.d.mtstype declarations.
Verify this dependency does not conflict with downstream consumer module systems and update TypeScript configuration accordingly.
🤖 Prompt for AI Agents
In `@pnpm-workspace.yaml` at line 75, The pinned dependency antdv-next
(^1.0.0-rc.8) is ESM-only and requires consumers to use ESM and modern TS
resolution; verify all downstream packages that consume antdv-next can run as
ESM (or migrate them), replace or pin to a CJS-compatible release if any
consumer must remain CommonJS, and update TypeScript configs (tsconfig.json) for
affected packages to use moduleResolution: "Node16" / "NodeNext" or "Bundler" so
.d.mts types resolve; also audit import sites to only use supported export
subpaths (e.g., antdv-next/date-picker, antdv-next/locale) rather than
undocumented deep imports.
|
更新到最新的antdv-next吧 |
|
@jinmao88 已将 |
|
弄个新APP 比较好 |
好的，我将会关闭这个请求，重新开启一个 |
2 participants
Description
Type of change
Please delete options that are not relevant.
pnpm-lock.yamlunless you introduce a new test example.Checklist
pnpm run docs:devcommand.pnpm test.feat:,fix:,perf:,docs:, orchore:.Summary by CodeRabbit