Registry / testing / react-clear-browser-cache

react-clear-browser-cache

library0.2.3jsnpmunverified

A React library (v0.2.3) for automatically clearing browser cache after app updates by generating a build version meta file and checking for new versions on interval. Designed to handle chunk load errors in code-split React apps. Works with React 16+. Provides a Boundary component, a hook, and render props. Similar to react-cache-clear but with more configuration options and built-in error handling. Low release cadence (last release 2020). Minimal bundle size.

testing

npm install react-clear-browser-cache

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-CLEAR-BROWSE

react-clear-browser-cache

testingjavascriptv0.2.3

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

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

ClearBrowserCacheBoundary

✓ import { ClearBrowserCacheBoundary } from 'react-clear-browser-cache'

✗ import ClearBrowserCacheBoundary from 'react-clear-browser-cache'

Named export, not default.

useClearBrowserCache

✓ import { useClearBrowserCache } from 'react-clear-browser-cache'

✗ import { useClearBrowserCache } from 'react-clear-browser-cache/hooks'

Named export from main entry.

ClearBrowserCache

✓ import { ClearBrowserCache } from 'react-clear-browser-cache'

✗ import ClearBrowserCache from 'react-clear-browser-cache'

Named export for render prop component.

Demonstrates installation, meta file generation script setup, and basic usage of ClearBrowserCacheBoundary with auto-reload and a 60-second polling interval.

// 1. Install: npm install --save react-clear-browser-cache // 2. Add script to package.json: "prebuild": "npm run generate-build-meta", // "generate-build-meta": "node ./node_modules/react-clear-browser-cache/bin/cli.js" // 3. In your app: import React from 'react'; import ReactDOM from 'react-dom'; import { ClearBrowserCacheBoundary } from 'react-clear-browser-cache'; function App() { return <div>My App</div>; } ReactDOM.render( <ClearBrowserCacheBoundary auto fallback="Loading..." duration={60000}> <App /> </ClearBrowserCacheBoundary>, document.getElementById('root') );

Debug

Known issues

gotchaThe CLI script generates a meta.json file; ensure you run the script before each build (e.g., via prebuild) or the version check will not reflect new deployments.

fix

Add a prebuild script as shown in the README to auto-generate meta.json before each build.

affects: all

gotchaClearBrowserCacheBoundary catches only errors that match registered error checkers. By default it only handles ChunkLoadError. If you need to handle other cache-related errors, provide custom errorCheckers.

fix

Pass an array of custom checker functions to the errorCheckers prop.

affects: all

deprecatedThe render props component (ClearBrowserCache) is considered less idiomatic in modern React; the hook (useClearBrowserCache) is preferred.

fix

Use the useClearBrowserCache hook inside a child of ClearBrowserCacheBoundary instead.

affects: all

gotchaThe duration prop determines how often the library fetches meta.json. Setting it too low may cause excessive requests; setting it too high may delay cache clearing.

fix

Choose a duration that balances freshness and network load (e.g., 60000 ms for 1 minute).

affects: all

Errors

Common errors & fixes

Cannot find module 'react-clear-browser-cache/bin/cli.js'

The CLI script path is relative to the package; must be called from the project root where node_modules is accessible.

fix

Run the script as: node ./node_modules/react-clear-browser-cache/bin/cli.js

TypeError: Cannot read property 'version' of undefined

The meta.json file is missing or malformed; the library expects a JSON object with a 'version' field.

fix

Ensure the prebuild script runs successfully and generates a valid meta.json in your public directory.

Warning: Failed prop type: The prop `auto` is marked as required in `ClearBrowserCacheBoundary`

The auto prop is required when using the component; it must be explicitly set to true or false.

fix

Add auto prop to ClearBrowserCacheBoundary: auto={true} or auto={false}

Upgrade

Version history

0.2.3latest on npm

Audit

Dependencies

reactrequiredPeer dependency for React components and hooks

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/arenuzzz/react-clear-browser-cache ↗

packagereact-clear-browser-cache ↗

homepagehttps://github.com/arenuzzz/react-clear-browser-cache#readme ↗