fix frontend dependency resolution and VChart browser mode

[jiahao-jayden]

Summary

• alias classic date-fns-tz consumers to date-fns-v2 so the classic build does not resolve against the workspace date-fns@4
• load the Tailwind v3 PostCSS plugin explicitly for the classic frontend to avoid picking up the workspace Tailwind v4 package
• initialize VisActor browser rendering support in both frontends
• pass classic dashboard VChart config via options, which is the prop name used by @visactor/react-vchart@1.8; this ensures mode: 'desktop-browser' reaches the VChart constructor
• force classic Rsbuild to resolve VisActor v1 rendering dependencies from the same @visactor/vchart@1.8 dependency tree, avoiding multiple vrender-core containers and preventing createCanvas runtime crashes

Verification

• cd web/default && DISABLE_ESLINT_PLUGIN='true' VITE_REACT_APP_VERSION=codex-pr-test bun run build
• cd web && bun install --frozen-lockfile
• cd web/classic && VITE_REACT_APP_VERSION=codex-pr-test bun run build
• verified the classic vendor chunk changed from the bad 9709.d7e98865f4.js bundle to a rebuilt 5586.67c0e35701.js bundle locally

Summary by CodeRabbit

• Bug Fixes

  • Updated dashboard chart components to use the correct configuration prop so all chart visualizations render reliably across tabs and stat cards.

• Chores

  • Improved VisActor browser environment initialization to run only in browser contexts.
  • Enhanced build setup for consistent browser compatibility.
  • Added/adjusted date handling support and updated PostCSS plugin configuration.

[coderabbitai]

Walkthrough

Adds conditional VChart browser environment registration modules to both the classic and default web apps, bootstrapped via side-effect imports in each app's entrypoint. The classic app also aliases date-fns to a pinned v2 package in the Rsbuild config, and the PostCSS config is switched from object-map to array form. Dashboard chart components rename the VChart prop from option to options.

Changes

VChart and Build Fixes

Layer / File(s)	Summary
date-fns v2 dependency and alias web/classic/package.json, web/classic/rsbuild.config.ts	Adds date-fns-v2 (npm:date-fns@^2.30.0) to dependencies and configures path constants and resolve.alias in Rsbuild to redirect date-fns imports to that v2 directory, along with mappings for @visactor/\* sub-dependencies.
PostCSS plugins array form web/classic/postcss.config.js	Replaces the PostCSS plugins object map with an array of instantiated plugin calls, adding explicit import statements for tailwindcss and autoprefixer.
VChart browser env modules web/classic/src/lib/visactor-env.js, web/default/src/lib/visactor-env.ts	Adds two new modules that call registerBrowserEnv from @visactor/vchart behind a typeof window !== 'undefined' guard, with no exported symbols.
VChart env bootstrap and prop rename web/classic/src/index.jsx, web/default/src/main.tsx, web/classic/src/components/dashboard/ChartsPanel.jsx, web/classic/src/components/dashboard/StatsCards.jsx	Imports visactor-env as a side effect in each app's entrypoint, and renames the VChart configuration prop from option to options across all chart render branches in ChartsPanel and StatsCards.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related issues

• Build failure: classic frontend date-fns-tz resolves date-fns v4 internal exports #5668: This PR directly resolves the build failure described in that issue by adding date-fns-v2 as a pinned dependency and aliasing date-fns to v2 in the Rsbuild config, fixing the incompatibility where date-fns-tz@1.3.8 (expecting v2 internal paths) conflicts with the workspace's top-level date-fns@4.4.0.

Possibly related PRs

• QuantumNous/new-api#5232: Both PRs modify web/classic/rsbuild.config.ts — the referenced PR introduces the classic Rsbuild configuration, while this PR extends it with date-fns and @visactor dependency aliases.

Poem

🐇 Hop hop, the charts now see the light,
registerBrowserEnv called just right,
date-fns pinned to v2 with care,
options prop floating through the air,
PostCSS arrays lined up in a row —
This bunny's build is ready to go! 🥕

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main changes in the PR: fixing frontend dependency resolution and enabling VChart browser mode.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@web/classic/rsbuild.config.ts`:
- Around line 14-26: The vchartDependencyAliases object uses hardcoded nested
paths via path.join(vchartVisactorDir, name) which assumes a specific directory
structure that may not exist due to package manager hoisting. Instead of
constructing paths relative to vchartVisactorDir, dynamically resolve each
VChart sub-package using require.resolve() for each name in the array, similar
to how the initial `@visactor/vchart` package is resolved. This will ensure the
aliases point to the actual installed locations regardless of hoisting behavior.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: cd00a2ca-3439-4110-8851-d37f4ef917c0

📥 Commits

Reviewing files that changed from the base of the PR and between ce19b62 and ae2abf6.

📒 Files selected for processing (1)

• web/classic/rsbuild.config.ts