Registry / web-framework / detect-bundler

detect-bundler

JSON →
library1.1.0jsnpmunverified

The `detect-bundler` package provides build-time flags to identify if the current code is being bundled for a web browser (e.g., via Webpack, Browserify) or for React Native (via Metro). Unlike runtime environment detection, this library leverages the `package.json` `browser` field specification to resolve platform-specific code paths during the build process, ensuring zero runtime overhead. Its current stable version is 1.1.0. Given its focused utility, new releases are infrequent and primarily address minor updates or compatibility fixes rather than new features. This design choice makes it particularly useful for libraries or applications needing to conditionally include platform-specific logic without impacting runtime performance, differentiating it from solutions that rely on `navigator` or `process` checks.

npm install detect-bundler
INSTALL
IMPORT
SIG · DETECT-BUNDLER
D
detect-bundler
web-frameworkjavascriptv1.1.0
Install
Import
Disk
Pass rate
0/ 6
Env Coverage0 / 6
glibc
1822
musl
1822
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 18226 runs
build_error
glibc
node 18226 runs
build_error
Code
Verified usage

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

isBrowser
import { isBrowser } from 'detect-bundler';
const isBrowser = require('detect-bundler').isBrowser;
ESM is the recommended import style; CommonJS require() is also supported but less idiomatic for modern TypeScript projects.
isReactNative
import { isReactNative } from 'detect-bundler';
const isReactNative = require('detect-bundler').isReactNative;
Flags are resolved at build-time based on package.json 'browser' field, not at runtime.
{ isBrowser, isReactNative }
import { isBrowser, isReactNative } from 'detect-bundler';
import detectBundler from 'detect-bundler';
The package exports named flags, not a default export.

Demonstrates importing and using the `isBrowser` and `isReactNative` flags to conditionally execute platform-specific code at build time.

import { isBrowser, isReactNative } from 'detect-bundler'; // This code demonstrates how to use the build-time detection flags. // The values of isBrowser and isReactNative are determined by your bundler // and package.json 'browser' field configuration at build-time. // They are static constants in the final bundled output. if (isBrowser) { console.log('Running in a browser environment (detected at build time).'); // Perform browser-specific initialization, e.g., accessing DOM // document.body.classList.add('is-browser'); } else if (isReactNative) { console.log('Running in a React Native environment (detected at build time).'); // Perform React Native-specific initialization // import { Platform } from 'react-native'; // if (Platform.OS === 'ios') { /* ... */ } } else { console.log('Running in a Node.js-like or other environment.'); // Perform Node.js or universal initialization console.log(`Current environment variable example: ${process.env.NODE_ENV ?? 'undefined'}`); } // Example of conditional export based on detection export const platformSpecificMessage = isBrowser ? 'Hello from the Web!' : isReactNative ? 'Hello from React Native!' : 'Hello from Node.js!'; console.log(platformSpecificMessage);
Debug
Known issues
gotchaThe `detect-bundler` flags (`isBrowser`, `isReactNative`) are resolved exclusively at *build time* by your bundler based on the `package.json` `browser` field. They are not dynamic runtime checks. Assuming they will change or reflect the environment at runtime will lead to incorrect behavior.
fix
Understand that these flags become static boolean constants in your bundled output. Use them for conditional imports or code paths that are resolved *before* your application runs, not for runtime environment switching. For runtime detection, use standard browser APIs (e.g., `window` object) or Node.js `process` globals.
affects: >=1.0.0
Errors
Common errors & fixes
ReferenceError: window is not defined
Code relying on `isBrowser` being true attempts to access browser-specific globals in a non-browser build target where `detect-bundler` resolved `isBrowser` to `false`.
fix
Ensure that code paths guarded by `isBrowser` or `isReactNative` are truly only executed or imported when the respective flag is statically true for the current build target. This may involve proper bundler configuration for conditional exports or environment targets.
console.log(isBrowser) always shows 'false' (or 'true') even though I expect the opposite!
Misunderstanding that the `isBrowser` and `isReactNative` flags are resolved *at build time* based on bundler configuration and `package.json`'s `browser` field, not detected dynamically at runtime.
fix
Verify your bundler configuration (e.g., Webpack `target`, Metro configuration) and how it interprets the `package.json` `browser` field. If `isBrowser` is unexpectedly `false`, your bundler might be resolving to the Node.js version of the package, even if the eventual target is a browser.
Upgrade
Version history
1.1.0latest on npm
Audit
Dependencies

No dependency data recorded yet.

Agent activity
4 hits · last 30 days
node
4
Resources
detect-bundler — npm install detect-bundler · libregistry