{"id":22594,"library":"vite-plugin-browser-sync","title":"vite-plugin-browser-sync","description":"A Vite plugin that integrates BrowserSync into your Vite development workflow. Current stable version is v7.0.0, supporting Vite 7 and 8 with Node 20+. It provides zero-config setup for common use cases, supports BrowserSync proxy and snippet modes, and can run on dev, preview, and build --watch. Key differentiators: seamless integration with Vite's ecosystem, automatic syncing of Vite server options, and full BrowserSync features. Release cadence follows major Vite versions with breaking changes. Ships TypeScript types.","status":"active","version":"7.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/Applelo/vite-plugin-browser-sync","tags":["javascript","browsersync","browser-sync","livereload","serve","vite","vite-plugin","typescript"],"install":[{"cmd":"npm install vite-plugin-browser-sync","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-browser-sync","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-browser-sync","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency - plugin requires Vite 7 or 8","package":"vite","optional":false},{"reason":"Runtime dependency - BrowserSync is used for live reload and synchronization","package":"browser-sync","optional":false}],"imports":[{"note":"ESM-only since v6.0.0 - CommonJS require() will fail.","wrong":"const VitePluginBrowserSync = require('vite-plugin-browser-sync')","symbol":"VitePluginBrowserSync","correct":"import VitePluginBrowserSync from 'vite-plugin-browser-sync'"},{"note":"Default export, not named.","wrong":"import { VitePluginBrowserSync } from 'vite-plugin-browser-sync'","symbol":"VitePluginBrowserSync","correct":"import VitePluginBrowserSync from 'vite-plugin-browser-sync'"},{"note":"Dynamic import in CJS or ESM contexts to avoid top-level import issues.","wrong":"","symbol":"VitePluginBrowserSync","correct":"const VitePluginBrowserSync = (await import('vite-plugin-browser-sync')).default"}],"quickstart":{"code":"import { defineConfig } from 'vite';\nimport VitePluginBrowserSync from 'vite-plugin-browser-sync';\n\nexport default defineConfig({\n  plugins: [\n    VitePluginBrowserSync({\n      dev: {\n        bs: {\n          ui: { port: 8080 },\n          notify: false\n        }\n      }\n    })\n  ]\n});","lang":"typescript","description":"Shows basic usage with custom BrowserSync options for the dev server, including disabling the notify banner and setting the UI port."},"warnings":[{"fix":"Upgrade to Vite 7+ and Node 20+. If unable, use version 5.0 of the plugin.","message":"v7.0.0 drops support for Vite 6 and Node 18. Requires Vite 7+ and Node 20+.","severity":"breaking","affected_versions":">=7.0.0"},{"fix":"Use ESM imports; switch to dynamic import if CJS is required: const VitePluginBrowserSync = (await import('vite-plugin-browser-sync')).default","message":"v6.0.0 drops CJS support. The package is now ESM-only.","severity":"breaking","affected_versions":">=6.0.0"},{"fix":"Wrap BrowserSync options inside a 'dev' object, e.g., { dev: { bs: {...} } }.","message":"The 'bs' top-level option (used in v2.x) is deprecated since v3.0.0.","severity":"deprecated","affected_versions":">=3.0.0 <5.0.0"},{"fix":"Configure 'buildWatch.bs.proxy' to point to your server, e.g., proxy: 'http://localhost:3000'","message":"In 'buildWatch' mode, if using 'proxy' default, you must explicitly set the 'bs' object with a proxy target.","severity":"gotcha","affected_versions":"*"},{"fix":"Use only 'dev' mode with Astro. Alternatively, disable preview mode: { preview: { enable: false } }","message":"For Astro projects, the plugin does not work in 'preview' mode due to Astro's overrides.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Convert your config to ESM (use .mjs or add 'type': 'module' in package.json) or use dynamic import: const VitePluginBrowserSync = (await import('vite-plugin-browser-sync')).default","cause":"The package is ESM-only since v6.0.0, but your vite.config.js uses CommonJS require().","error":"Error [ERR_REQUIRE_ESM]: require() of ES Module /path/to/node_modules/vite-plugin-browser-sync/dist/index.js from /path/to/vite.config.js not supported."},{"fix":"Change import to: import VitePluginBrowserSync from 'vite-plugin-browser-sync'","cause":"Using named import { VitePluginBrowserSync } instead of default import.","error":"TypeError: VitePluginBrowserSync is not a function"},{"fix":"Upgrade Vite to ^7.0.0 or ^8.0.0, or downgrade the plugin to version 5.0 (supports Vite 6-7).","cause":"Running an incompatible version of Vite (e.g., Vite 6).","error":"Error: The plugin requires Vite 7 or 8. Current Vite version is X.Y.Z."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}