vite-env-only

import { defineConfig } from 'vite'; import { denyImports, envOnlyMacros } from 'vite-env-only'; import { serverOnly$, clientOnly$ } from 'vite-env-only/macros'; export default defineConfig({ plugins: [ denyImports({ client: { specifiers: ['fs-extra', /^node:/, '@prisma/*'], files: ['**/.server/*', '**/*.server.*'], }, server: { specifiers: ['jquery'], }, }), envOnlyMacros() ], }); // Example usage in your application code (e.g., src/main.ts or a component) // This will be 'i only exist on the server' on the server, undefined on the client export const serverMessage = serverOnly$('i only exist on the server'); // This will be 'i only exist on the client' on the client, undefined on the server export const clientMessage = clientOnly$('i only exist on the client'); // Type-safe usage demonstrating potential undefined export const API_KEY = serverOnly$(process.env.VITE_SERVER_API_KEY ?? ''); // ^? string | undefined if (serverMessage !== undefined) { console.log('Server-side message:', serverMessage); } if (clientMessage !== undefined) { console.log('Client-side message:', clientMessage); } // To make sure environment variables are passed to the server-side code // you might need to set them in your .env file with or without VITE_ prefix // depending on how you intend to use them (client/server in Vite config). // For this example, VITE_SERVER_API_KEY would usually be processed by the build tool // to ensure it's available only where needed, or directly accessed via process.env // in Node.js contexts.