Registry / web-framework / vite-plugin-browser-sync

vite-plugin-browser-sync

library7.0.0jsnpmunverified

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.

web-framework devops

npm install vite-plugin-browser-sync

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-BROWSE

vite-plugin-browser-sync

web-frameworkjavascriptv7.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VitePluginBrowserSync

✓ import VitePluginBrowserSync from 'vite-plugin-browser-sync'

✗ const VitePluginBrowserSync = require('vite-plugin-browser-sync')

ESM-only since v6.0.0 - CommonJS require() will fail.

VitePluginBrowserSync

✓ import VitePluginBrowserSync from 'vite-plugin-browser-sync'

✗ import { VitePluginBrowserSync } from 'vite-plugin-browser-sync'

Default export, not named.

VitePluginBrowserSync

✓ const VitePluginBrowserSync = (await import('vite-plugin-browser-sync')).default

Dynamic import in CJS or ESM contexts to avoid top-level import issues.

Shows basic usage with custom BrowserSync options for the dev server, including disabling the notify banner and setting the UI port.

import { defineConfig } from 'vite'; import VitePluginBrowserSync from 'vite-plugin-browser-sync'; export default defineConfig({ plugins: [ VitePluginBrowserSync({ dev: { bs: { ui: { port: 8080 }, notify: false } } }) ] });

Debug

Known issues

breakingv7.0.0 drops support for Vite 6 and Node 18. Requires Vite 7+ and Node 20+.

fix

Upgrade to Vite 7+ and Node 20+. If unable, use version 5.0 of the plugin.

affects: >=7.0.0

breakingv6.0.0 drops CJS support. The package is now ESM-only.

fix

Use ESM imports; switch to dynamic import if CJS is required: const VitePluginBrowserSync = (await import('vite-plugin-browser-sync')).default

affects: >=6.0.0

deprecatedThe 'bs' top-level option (used in v2.x) is deprecated since v3.0.0.

fix

Wrap BrowserSync options inside a 'dev' object, e.g., { dev: { bs: {...} } }.

affects: >=3.0.0 <5.0.0

gotchaIn 'buildWatch' mode, if using 'proxy' default, you must explicitly set the 'bs' object with a proxy target.

fix

Configure 'buildWatch.bs.proxy' to point to your server, e.g., proxy: 'http://localhost:3000'

affects: *

gotchaFor Astro projects, the plugin does not work in 'preview' mode due to Astro's overrides.

fix

Use only 'dev' mode with Astro. Alternatively, disable preview mode: { preview: { enable: false } }

affects: *

Errors

Common errors & fixes

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.

The package is ESM-only since v6.0.0, but your vite.config.js uses CommonJS require().

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

TypeError: VitePluginBrowserSync is not a function

Using named import { VitePluginBrowserSync } instead of default import.

fix

Change import to: import VitePluginBrowserSync from 'vite-plugin-browser-sync'

Error: The plugin requires Vite 7 or 8. Current Vite version is X.Y.Z.

Running an incompatible version of Vite (e.g., Vite 6).

fix

Upgrade Vite to ^7.0.0 or ^8.0.0, or downgrade the plugin to version 5.0 (supports Vite 6-7).

Upgrade

Version history

7.0.0latest on npm

Audit

Dependencies

viterequiredPeer dependency - plugin requires Vite 7 or 8

browser-syncrequiredRuntime dependency - BrowserSync is used for live reload and synchronization

Agent activity

5 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/Applelo/vite-plugin-browser-sync ↗

packagehttps://www.npmjs.com/package/vite-plugin-browser-sync ↗