A React package can be only a few kilobytes of source and still make consumers install a surprisingly large dependency tree. In Saad Ahmad’s account of auditing his scroll-stacking component, the published package was about 4 KB, but its manifest placed build tools and React type definitions under production dependencies; he reports that installing the dependency set pulled 116 packages. The audit also surfaced a bundled JSX runtime, a browser-facing process.env.NODE_ENV reference, and missing type declarations for a hook-using component. These are package-specific findings, not an npm-wide rule or independently reproduced test.
Why a 4 KB package brought in 116 dependencies
Ahmad’s package was a small React scroll-stacking component. The key distinction in his post-mortem is between the size of the component and the cost of installing and using the published package. A tiny source file does not guarantee a tiny production dependency tree: consumers install what the package manifest declares, along with the transitive dependencies those packages require.
As an Amazon Associate I earn from qualifying purchases.
Ahmad says the manifest listed Rollup, rollup-plugin-postcss, and @types/react in dependencies, and reports that installing this dependency set pulled 116 packages. That number describes his package and the installation he reported; it is not a general npm statistic. Ahmad’s package audit
Which packages belong in production dependencies?
The manifest determines which packages npm treats as required by an application in production. npm distinguishes those from packages used only while developing and testing a package. Its guidance says build tools such as transpilers and test harnesses should not be placed in production dependencies when consumers do not need them to run the published package.
#1 Best Overall
dependencies: packages the application needs at runtime.devDependencies: packages used for local development and testing, including build tooling that is not needed to run the published result.
Applied to Ahmad’s report, Rollup and its PostCSS plugin are build-time tools, while @types/react supplies TypeScript declarations rather than runtime functionality. Their presence in his production dependency list therefore increased the installed dependency set without representing runtime code the component itself needed. See npm’s guide to dependencies and devDependencies and its package.json documentation.
What the bundle audit revealed beyond the manifest
The React JSX runtime was not externalized
Ahmad says the Rollup external list omitted react/jsx-runtime, so the development runtime was bundled into the generated output. This is a separate issue from the manifest: moving build tools out of production dependencies can reduce the installed dependency tree, but it does not by itself ensure that the published bundle leaves framework code to the consumer’s React installation. In this case, the audit finding was that the package’s Rollup configuration did not treat that runtime import as external. Ahmad’s account of the bundle findings
The output referenced a Node-style environment variable
Ahmad also reports that the generated output referenced process.env.NODE_ENV, which failed in some browser setups. That is a compatibility issue in the emitted bundle, not proof that every browser or bundler will fail. A package author should inspect the actual published output and verify that its environment references are handled by the intended build process and consumer environments.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Why a hook-using component needs consumer-facing types
Ahmad says the component used a React hook but lacked the type declarations consumers needed. A package can work at runtime and still be difficult or impossible to consume cleanly from a TypeScript project if its public API has no usable type information. The important check is the published package as installed by a consumer: declarations should describe the exported component and its props, rather than relying on the package’s development-only type tooling to supply types implicitly.
A practical audit checklist for a small React package
- Inspect the published manifest. Check
dependencies,devDependencies, and the package’s declared entry points. Ask whether each production dependency is needed when an application runs the published component. - Separate build tooling from runtime needs. Keep bundlers, build plugins, and test-only tools out of production dependencies when the consumer does not need them to execute the package. Use npm’s dependency guidance to verify the distinction.
- Review the bundler’s external list. Confirm that imports meant to be provided by the consumer’s React setup—including the JSX runtime where applicable—are not accidentally copied into the package output.
- Read the generated files, not just the source. Search the emitted bundle for unexpected framework code and environment references such as
process.env.NODE_ENV; then test the published build in the browser setups it is intended to support. - Check the package from a consumer’s perspective. Install the packed or published artifact in a clean project, exercise its runtime entry point, and verify that a TypeScript consumer can resolve declarations for the exported API.
What this audit does—and does not—establish
Ahmad’s report is a useful example of how a package’s source size can conceal install-time and integration costs. It documents his manifest contents, the 116-package installation he observed, and specific bundle and typing problems he encountered. It does not establish that all small React packages have the same issues, that every consumer environment will fail on the reported environment reference, or that the package’s later versions share those exact defects.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
