{"id":22597,"library":"vite-plugin-builder","title":"Vite Plugin Builder","description":"A Vite plugin that simplifies dual compilation for SSR (Server-Side Rendering) and CSR (Client-Side Rendering) in a single Vite project. Version 1.0.0 supports Vite ^4||^5||^6. It allows building both server and client entry points simultaneously, streamlining workflows for modern SPAs requiring SSR. Notably, it provides separate output directories for server (dist/) and client (dist/public/) assets, with configurable server build options and external dependencies. Written in TypeScript, it offers type safety and minimal setup compared to manual dual-build configurations.","status":"active","version":"1.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/yracnet/vite-plugin-builder","tags":["javascript","SSR","CSR","SPA","Vite","plugin","server-side rendering","client-side rendering","dual compilation"],"install":[{"cmd":"npm install vite-plugin-builder","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-builder","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-builder","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; plugin requires Vite version ^4, ^5, or ^6 to function.","package":"vite","optional":false}],"imports":[{"note":"Default export; named import will fail.","wrong":"import { builder } from 'vite-plugin-builder'","symbol":"builder","correct":"import builder from 'vite-plugin-builder'"},{"note":"TypeScript type exported; import as type to avoid runtime issues. Use 'import type' for type-only imports.","wrong":"import { BuilderOptions } from 'vite-plugin-builder'","symbol":"BuilderOptions","correct":"import type { BuilderOptions } from 'vite-plugin-builder'"},{"note":"TypeScript type for server build config override function. Not a class or value.","wrong":"import { ViteConfig } from 'vite-plugin-builder'","symbol":"ViteConfig","correct":"import type { ViteConfig } from 'vite-plugin-builder'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport path from 'path';\nimport react from '@vitejs/plugin-react-swc';\nimport builder from 'vite-plugin-builder';\n\nexport default defineConfig({\n  base: '/',\n  plugins: [\n    react(),\n    builder({\n      serverEntry: 'server/main.js',\n      clientEntry: {\n        main: 'index.html',\n      },\n      serverConfig: {\n        define: {\n          'BUILD.BASE': '\"/\"',\n          'BUILD.BASE_API': '\"/api\"',\n          'BUILD.STATIC_DIR': '\"public\"',\n          'BUILD.SERVER_IP': '\"0.0.0.0\"',\n          'BUILD.SERVER_PORT': '3001',\n        },\n      },\n    }),\n  ],\n});","lang":"typescript","description":"Configures Vite with the builder plugin: sets server entry, client entry, and custom build defines for SSR/CSR dual compilation."},"warnings":[{"fix":"Do not set 'outDir' in your Vite config; allow the plugin to manage output directories automatically.","message":"Builder plugin overrides Vite's output directory structure; server output goes to dist/, client to dist/public/. Do not manually set 'outDir' in Vite config as it will conflict with plugin's internal logic.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use { main: 'index.html' } instead of just 'index.html'.","message":"clientEntry expects an object mapping logical names to HTML template files. Using a plain string will cause a build error.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Set external: ['express', 'react'] for fine-grained control, or avoid setting it to keep default behavior.","message":"The plugin automatically externalizes dependencies when serverConfig.external is set to 'true'. If you need specific externals, provide an array instead.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always return the modified viteConfig object from serverBuild.","message":"serverBuild function receives a Vite config object and must return it; omitting the return statement will break the build.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade Vite to version 4 or later.","message":"Version 1.0.0 drops support for Vite 3; only Vite ^4, ^5, ^6 are supported.","severity":"breaking","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Upgrade Vite to version >=4: npm install vite@latest","cause":"Using Vite 3 which is not supported by the plugin.","error":"Error: The plugin 'vite-plugin-builder' doesn't support Vite version 3.x. Please upgrade to Vite 4 or later."},{"fix":"Change import statement to: import builder from 'vite-plugin-builder'","cause":"Named import instead of default import.","error":"TypeError: builder is not a function"},{"fix":"Run npm install vite-plugin-builder --save-dev or yarn add vite-plugin-builder --dev, and ensure import path is correct.","cause":"Package not installed or import path incorrect.","error":"Error: Cannot find module 'vite-plugin-builder'"},{"fix":"Wrap value in an object: clientEntry: { main: 'index.html' }","cause":"Passed a string to clientEntry instead of an object.","error":"Error: Expected options.clientEntry to be an object, got string"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}