docs: fixed example of env variable validation with zod #5584
Conversation
WalkthroughReplaces separate server and client environment parsing/exports with a single isomorphic env export using a combined serverEnvSchema and clientEnvSchema via createIsomorphicFn/getEnv; removes Changes
Sequence Diagram(s)sequenceDiagram
participant Client as Client (browser)
participant Server as Server (node)
participant EnvFn as getEnv()
Note over EnvFn: Combined schema\n(serverEnvSchema ∧ clientEnvSchema)
Client->>EnvFn: call getEnv() -> client branch
EnvFn-->>Client: parse import.meta.env via clientEnvSchema\nreturn Env (client view)
Server->>EnvFn: call getEnv() -> server branch
EnvFn-->>Server: parse process.env via serverEnvSchema\nreturn Env (server view)
Note right of EnvFn: Single exported `env` value\nbacked by isomorphic getter
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🧰 Additional context used📓 Path-based instructions (2)docs/**/*.{md,mdx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
docs/{router,start}/**📄 CodeRabbit inference engine (AGENTS.md)
Files:
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
🔇 Additional comments (1)
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 |
|
View your CI Pipeline Execution ↗ for commit de0aabe
☁️ Nx Cloud last updated this comment at |
More templates
@tanstack/arktype-adapter
@tanstack/directive-functions-plugin
@tanstack/eslint-plugin-router
@tanstack/history
@tanstack/nitro-v2-vite-plugin
@tanstack/react-router
@tanstack/react-router-devtools
@tanstack/react-router-ssr-query
@tanstack/react-start
@tanstack/react-start-client
@tanstack/react-start-server
@tanstack/router-cli
@tanstack/router-core
@tanstack/router-devtools
@tanstack/router-devtools-core
@tanstack/router-generator
@tanstack/router-plugin
@tanstack/router-ssr-query-core
@tanstack/router-utils
@tanstack/router-vite-plugin
@tanstack/server-functions-plugin
@tanstack/solid-router
@tanstack/solid-router-devtools
@tanstack/solid-router-ssr-query
@tanstack/solid-start
@tanstack/solid-start-client
@tanstack/solid-start-server
@tanstack/start-client-core
@tanstack/start-plugin-core
@tanstack/start-server-core
@tanstack/start-static-server-functions
@tanstack/start-storage-context
@tanstack/valibot-adapter
@tanstack/virtual-file-routes
@tanstack/zod-adapter
commit: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
docs/start/framework/react/guide/environment-variables.md(1 hunks)docs/start/framework/solid/guide/environment-variables.md(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
docs/**/*.{md,mdx}
📄 CodeRabbit inference engine (AGENTS.md)
Use internal docs links relative to the docs/ folder (e.g., ./guide/data-loading)
Files:
docs/start/framework/solid/guide/environment-variables.mddocs/start/framework/react/guide/environment-variables.md
docs/{router,start}/**
📄 CodeRabbit inference engine (AGENTS.md)
Place router docs under docs/router/ and start framework docs under docs/start/
Files:
docs/start/framework/solid/guide/environment-variables.mddocs/start/framework/react/guide/environment-variables.md
🔇 Additional comments (3)
docs/start/framework/solid/guide/environment-variables.md (1)
284-306: Excellent refactoring of environment variable validation pattern.The updated example correctly demonstrates:
- Combining server and client schemas with
.and()for unified type safety across environments- Using
createIsomorphicFn()to provide environment-aware parsing (server viaprocess.env, client viaimport.meta.env)- Exporting a single
envobject typed to the server schema, allowing TypeScript to surface all variables while maintaining runtime safetyThis addresses the original issue where importing server-side validation on the client would fail due to missing
process.env.docs/start/framework/react/guide/environment-variables.md (2)
281-305: Implementation correctly addresses the PR objectives: isomorphic environment validation with unified type exports.The refactored approach properly separates server and client validation contexts while maintaining a single export. The type casting to
serverEnvSchemaenables TypeScript to surface all variables, establishing a clear convention: TypeScript catches what it can, and runtime errors reveal actual access violations on the client.However, ensure documentation or code comments clarify the intentional type/runtime safety tradeoff. Developers accessing
env.DATABASE_URLon the client will see no TypeScript error but encounterundefinedat runtime. Consider adding an inline comment at line 305 explaining this design choice, or document it in a dedicated section.Does the codebase have existing patterns or conventions for documenting this kind of deliberate type/runtime mismatch elsewhere?
473-477: Verify related resources links follow the coding guidelines format.The current links use
../relative paths, but the coding guidelines specify: "Use internal docs links relative to the docs/ folder (e.g.,./guide/data-loading)". Confirm whether the current format is compliant or should be converted to the./notation recommended in the guidelines.
1 participant
This PR changes the example provided in the docs for environment variables validation with
zodThe current example in the docs is error-prone because it validates both client and server variables in the same file and when imported in any client-side code, the server side validation fails because
process.envdoes not exist on client-sideSo I make the following changes
createIsomorphicFnto validate the variables in their respective environments.andmethod because client-side variables are available in the server environmentenvobject and typecast it to the server env schema type so that all variables are detected by TypeScript, just that in runtime if a server variable is used on client side, it'll fail. TypeScript cannot know which file is client-side code hence the typecastSummary by CodeRabbit
New Features
Documentation