Vite plus, Vite 8 and Nitro 3 beta - #718
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughReplaces vite/vitest tooling with vite-plus ( Changes
Sequence Diagram(s)(Skipped) Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 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: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@package.json`:
- Around line 145-148: Add the missing `@babel` peer dependencies required by
`@rolldown/plugin-babel`@0.2.0: declare "@babel/core",
"@babel/plugin-transform-runtime", and "@babel/runtime" in package.json
dependencies or devDependencies with versions compatible with the plugin; also
resolve the Node engine mismatch between the project's "engines.node" and the
plugin's supported range (>=22.12.0 || ^24.0.0) by either updating
"engines.node" to a compatible range or pinning/replacing
"@rolldown/plugin-babel" with a version that supports your current
"engines.node" value so installs/builds succeed.
In `@vitest.config.ts`:
- Around line 10-12: The root Vitest config sets resolve.tsconfigPaths: true but
the inline projects ("browser" and "unit") must set extends: true to inherit
that root option; update each project object (the inline project entries named
"browser" and "unit" in the vitest config) to include extends: true so they
inherit resolve.tsconfigPaths while keeping their own resolve.alias values.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 84f61d5f-a8cf-4240-9c6c-40e7a95dd339
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (5)
package.jsonpostcss.config.mjsvite.config.tsvite.storybook.tsvitest.config.ts
💤 Files with no reviewable changes (1)
- postcss.config.mjs
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@package.json`:
- Line 61: The package "@tanstack/devtools-vite" is declared as a runtime
dependency but is only used as a Vite plugin during build; remove the entry from
the dependencies section and add it with the same version under devDependencies
in package.json so it is installed only for development/build time (ensure the
exact version "0.5.5" is moved and package.json remains valid JSON).
In `@vite.config.ts`:
- Around line 42-46: Remove the separate babel() plugin usage with
['@babel/preset-react', { runtime: 'automatic' }] and the external
reactCompilerPreset() and instead configure the React Compiler via viteReact()'s
options: call viteReact({ jsx: 'automatic', babel: { plugins:
[require('babel-plugin-react-compiler')(/* options if any */)] } }) (ensure
babel-plugin-react-compiler is installed) so JSX transformation is handled by
viteReact() and the React Compiler plugin is passed inline to viteReact() rather
than using babel() or `@babel/preset-react`.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: c727f01d-6368-4c79-8b1d-b5a900161e0f
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (5)
package.jsonpostcss.config.mjsvite.config.tsvite.storybook.tsvitest.config.ts
💤 Files with no reviewable changes (1)
- postcss.config.mjs
🚧 Files skipped from review as they are similar to previous changes (1)
- vite.storybook.ts
| babel({ | ||
| presets: [ | ||
| ['@babel/preset-react', { runtime: 'automatic' }], | ||
| reactCompilerPreset(), | ||
| ], |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== Check whether non-standard JSX-bearing extensions exist =="
fd -H -E node_modules -e mdx -e mdc -e astro -e vue -e svelte .
echo
echo "== Check if viteReact is configured with custom include/exclude =="
rg -n "viteReact\\(" vite.config.ts vitest.config.ts vite.storybook.ts || trueRepository: BearStudio/start-ui-web
Length of output: 278
🏁 Script executed:
cat -n vite.config.ts | sed -n '35,55p'Repository: BearStudio/start-ui-web
Length of output: 720
🏁 Script executed:
cat -n vite.config.ts | sed -n '42,47p'Repository: BearStudio/start-ui-web
Length of output: 256
🏁 Script executed:
rg -A5 "babel\(" vite.config.ts | head -20Repository: BearStudio/start-ui-web
Length of output: 214
🏁 Script executed:
rg -n "reactCompilerPreset" vite.config.ts -B5 -A2Repository: BearStudio/start-ui-web
Length of output: 678
🏁 Script executed:
rg -n "import.*react" vite.config.ts | head -20Repository: BearStudio/start-ui-web
Length of output: 208
🌐 Web query:
reactCompilerPreset @vitejs/plugin-react babel dependencies
💡 Result:
@vitejs/plugin-react already ships with (and uses) Babel internally—so you generally do not need to add Babel packages as your own dependencies just to use its React/JSX transforms (or a “React Compiler preset” style setup inside the plugin).
What Babel-related deps @vitejs/plugin-react brings
For example, @vitejs/plugin-react@5.0.1 lists these Babel deps as package dependencies:
@babel/core@babel/plugin-transform-react-jsx-self@babel/plugin-transform-react-jsx-source
[1]
What you must add for React Compiler
To enable React Compiler in a Vite + @vitejs/plugin-react project, React’s official docs instruct installing the compiler Babel plugin as a devDependency and adding it to the plugin-react Babel config:
- install:
babel-plugin-react-compiler@latest - configure in
vite.config.js:react({ babel: { plugins: ['babel-plugin-react-compiler'] } })
[2]
If you’re compiling a library (often the missing dependency)
If you’re compiling a library and need compatibility with React versions below 19, React recommends adding:
react-compiler-runtimeas a direct runtime dependency
[3]
Sources:
[1] @vitejs/plugin-react@5.0.1 dependency list (ReversingLabs) (secure.software)
[2] React Compiler installation guide (Vite section) (react.dev)
[3] React “Compiling Libraries” guide (runtime dependency recommendation) (react.dev)
Citations:
- 1: https://secure.software/npm/packages/%40vitejs/plugin-react/dependencies/5.0.1
- 2: https://react.dev/learn/react-compiler/installation
- 3: https://react.dev/reference/react-compiler/compiling-libraries?utm_source=openai
🌐 Web query:
"@babel/preset-react" "reactCompilerPreset" vitejs
💡 Result:
reactCompilerPreset is not an option supported by @babel/preset-react (it only documents options like runtime, development, importSource, etc.). [1]
To enable the React Compiler in a Vite app, you add it as a Babel plugin (and it must run first), typically via @vitejs/plugin-react:
// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [
react({
babel: {
plugins: ["babel-plugin-react-compiler"], // should run first
},
}),
],
});[2]
If you’re instead using a separate Babel step (e.g. vite-plugin-babel), then you provide the compiler plugin there and add presets like @babel/preset-typescript only if needed. [2]
Reconfigure viteReact() to include React Compiler instead of using a separate Babel plugin.
The @babel/preset-react is redundant since viteReact() already handles JSX transformation. More importantly, the separate babel() plugin approach for reactCompilerPreset() is non-standard; the React Compiler should be configured within viteReact() itself using inline Babel configuration.
♻️ Recommended approach
- viteReact(),
- babel({
- presets: [
- ['@babel/preset-react', { runtime: 'automatic' }],
- reactCompilerPreset(),
- ],
- }),
+ viteReact({
+ babel: {
+ plugins: ['babel-plugin-react-compiler'],
+ },
+ }),(Ensure babel-plugin-react-compiler is installed as a dev dependency.)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@vite.config.ts` around lines 42 - 46, Remove the separate babel() plugin
usage with ['@babel/preset-react', { runtime: 'automatic' }] and the external
reactCompilerPreset() and instead configure the React Compiler via viteReact()'s
options: call viteReact({ jsx: 'automatic', babel: { plugins:
[require('babel-plugin-react-compiler')(/* options if any */)] } }) (ensure
babel-plugin-react-compiler is installed) so JSX transformation is handled by
viteReact() and the React Compiler plugin is passed inline to viteReact() rather
than using babel() or `@babel/preset-react`.
|
Storybook deployment is not loading stories on my side. |
# Conflicts: # package.json # pnpm-lock.yaml
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
.storybook/preview.tsx (1)
113-120: Remount the Storybook router per story.This memory history is created once and reused for every subsequent story render. Keying
StorybookTanStackRouterbycontext.idkeeps navigation state from one story bleeding into the next.♻️ Proposed change
- <StorybookTanStackRouter> + <StorybookTanStackRouter key={context.id}>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In @.storybook/preview.tsx around lines 113 - 120, The Storybook router instance is reused across stories, causing navigation state to persist; update the JSX so StorybookTanStackRouter is remounted per story by adding a key prop derived from the story identifier (use context.id) on the StorybookTanStackRouter element so each story gets a fresh memory history and navigation state.package.json (1)
153-175: Pin the Vite+ aliases instead of floating onlatest.The core dev/build/test stack is aliased to
latestin bothdevDependenciesandpnpm.overrides. That makes a lockfile refresh silently change the compiler and test runner outside a reviewed PR; pinning one vetted version across all four entries will make this migration reproducible.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@package.json` around lines 153 - 175, The devDependency aliases ("vite", "vite-plus", "vitest", "vitest-browser-react") and the pnpm.overrides entries currently float on "latest", so replace those floating references with a single vetted, pinned version string and use that same exact version across the matching entries in devDependencies and pnpm.overrides (update "vite" -> npm:`@voidzero-dev/vite-plus-core`@<PINNED>, "vite-plus" -> <PINNED>, "vitest" -> npm:`@voidzero-dev/vite-plus-test`@<PINNED>, and ensure "vitest-browser-react" is pinned if needed) to prevent lockfile drift and make the build/test toolchain reproducible.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@vite.config.ts`:
- Around line 11-12: The code computes envMode using process.env fallbacks which
can miss custom Vite modes; change to use the Vite config callback's mode
parameter and call loadEnv(mode, process.cwd(), "VITE_") instead of using
envMode. Locate the variable envMode and the loadEnv call in vite.config.ts and
replace the fallback logic with the provided mode argument from the exported
defineConfig callback so custom modes (e.g., --mode staging) load the correct
.env files.
---
Nitpick comments:
In @.storybook/preview.tsx:
- Around line 113-120: The Storybook router instance is reused across stories,
causing navigation state to persist; update the JSX so StorybookTanStackRouter
is remounted per story by adding a key prop derived from the story identifier
(use context.id) on the StorybookTanStackRouter element so each story gets a
fresh memory history and navigation state.
In `@package.json`:
- Around line 153-175: The devDependency aliases ("vite", "vite-plus", "vitest",
"vitest-browser-react") and the pnpm.overrides entries currently float on
"latest", so replace those floating references with a single vetted, pinned
version string and use that same exact version across the matching entries in
devDependencies and pnpm.overrides (update "vite" ->
npm:`@voidzero-dev/vite-plus-core`@<PINNED>, "vite-plus" -> <PINNED>, "vitest" ->
npm:`@voidzero-dev/vite-plus-test`@<PINNED>, and ensure "vitest-browser-react" is
pinned if needed) to prevent lockfile drift and make the build/test toolchain
reproducible.
🪄 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: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 4cc301b9-f247-4916-8dde-d25d16983dc3
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (37)
.dockerignore.github/actions/setup-playwright/action.yml.github/actions/setup-pnpm/action.yml.github/workflows/code-quality.yml.github/workflows/e2e-tests.yml.gitignore.storybook/preview.tsx.vscode/extensions.jsonlefthook.ymlpackage.jsonpostcss.config.mjssrc/components/form/field-checkbox-group/field-checkbox-group.browser.spec.tsxsrc/components/form/field-checkbox/field-checkbox.browser.spec.tsxsrc/components/form/field-combobox-multiple/field-combobox-multiple.browser.spec.tsxsrc/components/form/field-combobox/field-combobox.browser.spec.tsxsrc/components/form/field-otp/field-otp.browser.spec.tsxsrc/components/form/field-radio-group/field-radio-group.browser.spec.tsxsrc/components/form/field-select/field-select.browser.spec.tsxsrc/components/form/field-text/index.browser.spec.tsxsrc/components/form/field-textarea/field-textarea.browser.spec.tsxsrc/components/ui/calendar.browser.spec.tsxsrc/lib/dayjs/parse-string-to-date.unit.spec.tssrc/routes/__root.tsxsrc/server/routers/account.unit.spec.tssrc/server/routers/book.unit.spec.tssrc/server/routers/config.unit.spec.tssrc/server/routers/genre.unit.spec.tssrc/server/routers/test-setup.tssrc/server/routers/test-utils.tssrc/server/routers/user.unit.spec.tssrc/tests/setup.browser.tssrc/tests/utils.tsxsrc/tests/vitest.d.tstsconfig.jsonvite.config.tsvite.storybook.tsvitest.config.ts
💤 Files with no reviewable changes (4)
- .gitignore
- lefthook.yml
- .dockerignore
- postcss.config.mjs
✅ Files skipped from review due to trivial changes (9)
- src/routes/__root.tsx
- src/server/routers/book.unit.spec.ts
- src/server/routers/user.unit.spec.ts
- src/server/routers/genre.unit.spec.ts
- src/tests/vitest.d.ts
- .vscode/extensions.json
- src/server/routers/config.unit.spec.ts
- src/lib/dayjs/parse-string-to-date.unit.spec.ts
- src/server/routers/account.unit.spec.ts
🚧 Files skipped from review as they are similar to previous changes (12)
- src/components/form/field-checkbox/field-checkbox.browser.spec.tsx
- src/components/form/field-text/index.browser.spec.tsx
- src/components/form/field-otp/field-otp.browser.spec.tsx
- vite.storybook.ts
- src/components/form/field-checkbox-group/field-checkbox-group.browser.spec.tsx
- src/components/form/field-textarea/field-textarea.browser.spec.tsx
- src/components/form/field-select/field-select.browser.spec.tsx
- src/components/form/field-radio-group/field-radio-group.browser.spec.tsx
- src/components/ui/calendar.browser.spec.tsx
- src/components/form/field-combobox/field-combobox.browser.spec.tsx
- vitest.config.ts
- src/components/form/field-combobox-multiple/field-combobox-multiple.browser.spec.tsx
| const envMode = process.env.MODE ?? process.env.NODE_ENV ?? "development"; | ||
| const env = loadEnv(envMode, process.cwd(), "VITE_"); |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
In Vite 8 / vite-plus config, should loadEnvuse themodeargument fromdefineConfig(({ mode }) => ...)rather thanprocess.env.MODEorprocess.env.NODE_ENV?
💡 Result:
Yes, in Vite 8 (and vite-plus config, which extends Vite config), loadEnv should use the mode argument from defineConfig(({ mode }) => ...) rather than process.env.MODE or process.env.NODE_ENV. The official Vite documentation explicitly shows this pattern: import { defineConfig, loadEnv } from 'vite' export default defineConfig(({ mode }) => { const env = loadEnv(mode, process.cwd, '') return { define: { APP_ENV: JSON.stringify(env.APP_ENV), }, } }) This loads the correct .env.[mode] files based on the Vite mode (e.g., 'development', 'production', 'staging'), which determines env file loading priority. process.env.NODE_ENV is distinct from Vite's mode—they can differ (e.g., vite build --mode staging sets mode='staging' but NODE_ENV='production'). Using process.env.MODE is non-standard and incorrect, as Vite does not set it; the mode param is the authoritative source. Vite 8 release notes confirm no breaking changes to config or loadEnv. vite-plus uses defineConfig from 'vite-plus' but follows the same Vite config structure, including loadEnv(mode) usage.
Citations:
- 1: https://v6.vite.dev/config
- 2: https://vite.dev/config/
- 3: https://vite.dev/guide/env-and-mode
- 4: https://main.vite.dev/guide/env-and-mode
- 5: https://github.com/vitejs/vite/blob/8e05b61d/packages/vite/CHANGELOG.md
- 6: https://main.vite.dev/blog/announcing-vite8
- 7: https://github.com/vitejs/vite/blob/v8.0.0/packages/vite/CHANGELOG.md
- 8: https://viteplus.dev/
- 9: https://viteplus.dev/config/
Load env from Vite mode instead of process.env fallbacks.
Lines 11–12 use process.env.MODE ?? process.env.NODE_ENV ?? "development" to determine the environment mode. This can resolve to development or production, which misses custom modes (e.g., --mode staging) and loads the wrong .env.* file. Vite's official pattern passes mode from the config callback to loadEnv.
♻️ Recommended fix
-const envMode = process.env.MODE ?? process.env.NODE_ENV ?? "development";
-const env = loadEnv(envMode, process.cwd(), "VITE_");
-
-export default defineConfig({
+export default defineConfig(({ mode }) => {
+ const env = loadEnv(mode, process.cwd(), "VITE_");
+ return {
resolve: {
tsconfigPaths: true,
},
server: {
port: env.VITE_PORT ? Number(env.VITE_PORT) : 3000,
strictPort: true,
},
// ...
fmt,
lint,
-});
+ };
+});📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const envMode = process.env.MODE ?? process.env.NODE_ENV ?? "development"; | |
| const env = loadEnv(envMode, process.cwd(), "VITE_"); | |
| export default defineConfig(({ mode }) => { | |
| const env = loadEnv(mode, process.cwd(), "VITE_"); | |
| return { | |
| resolve: { | |
| tsconfigPaths: true, | |
| }, | |
| server: { | |
| port: env.VITE_PORT ? Number(env.VITE_PORT) : 3000, | |
| strictPort: true, | |
| }, | |
| // ... rest of config ... | |
| fmt, | |
| lint, | |
| }; | |
| }); |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@vite.config.ts` around lines 11 - 12, The code computes envMode using
process.env fallbacks which can miss custom Vite modes; change to use the Vite
config callback's mode parameter and call loadEnv(mode, process.cwd(), "VITE_")
instead of using envMode. Locate the variable envMode and the loadEnv call in
vite.config.ts and replace the fallback logic with the provided mode argument
from the exported defineConfig callback so custom modes (e.g., --mode staging)
load the correct .env files.
| @@ -1,30 +0,0 @@ | |||
| { | |||
There was a problem hiding this comment.
I would prefer to keep the linter / formatter configs out of vite.config :/
I know it's the default vp migrate behavior but not a fan
| "paths": { | ||
| "@/*": ["./src/*"] | ||
| "@/*": ["./src/*"], | ||
| "*": ["./*"] |
|
Atama-Heitekava
left a comment
Atama-Heitekava
left a comment
There was a problem hiding this comment.
Multiple warnings about peer dependencies
Most of them seem to be caused by the alias of vite and vitest to vite-plus.
The only one not link to it is tanstack/zod-adapter with the package zod.
| "@vitest/browser-playwright": "4.0.18", | ||
| "@vitejs/plugin-react": "6.0.0", | ||
| "@vueless/storybook-dark-mode": "10.0.7", | ||
| "babel-plugin-react-compiler": "1.0.0", |
There was a problem hiding this comment.
The package babel-plugin-react-compiler is never called. Maybe it could be remove.
Same for the package rolldown/plugin-babel.
4 participants
Summary by CodeRabbit