Registry / devops / vite-plugin-redux-hmr

vite-plugin-redux-hmr

library1.0.1jsnpmunverified

Vite plugin for Redux Hot Module Replacement (HMR) during development. Current version 1.0.1, released February 2025 (single release). It eliminates full-page reloads when Redux reducers change, preserving store state. Requires a specific file structure: reducers must be default-exported from a separate file, and the store index file must import it. Configures store index and reducers file paths, optional store variable name and reducer wrapping function. Only works in Vite dev mode; no circular dependencies between files or Vite falls back to full reload. TypeScript types included. Lightweight alternative to manual HMR setup with webpack-hot-middleware or custom solutions. Minimal dependencies (only Vite as peer dependency).

devops

npm install vite-plugin-redux-hmr

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-REDUX-

vite-plugin-redux-hmr

devopsjavascriptv1.0.1

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.

default

✓ import reduxHmr from 'vite-plugin-redux-hmr'

✗ const reduxHmr = require('vite-plugin-redux-hmr')

ESM only; the package ships as ESM and does not provide a CommonJS export. Use import syntax.

ReduxHmrOptions

✓ import type { ReduxHmrOptions } from 'vite-plugin-redux-hmr'

✗ import { ReduxHmrOptions } from 'vite-plugin-redux-hmr'

ReduxHmrOptions is a TypeScript type, not a value; use type import to avoid runtime errors.

default (in config)

✓ plugins: [reduxHmr({ ... })]

✗ plugins: [reduxHmr]

The plugin must be called as a function with options object; passing the function reference directly will cause a runtime error.

Shows minimal setup: install plugin, configure in vite.config.ts, define reducers as default exports, and use Redux with HMR in development.

// vite.config.ts import { defineConfig } from 'vite'; import reduxHmr from 'vite-plugin-redux-hmr'; export default defineConfig({ plugins: [ reduxHmr({ storeIndexFilePath: 'src/store/index.ts', storeReducersFilePath: 'src/store/reducers/index.ts', storeVariableName: 'store', wrapReducersFunction: '(reducers) => reducers', }), ], }); // src/store/index.ts import { configureStore } from '@reduxjs/toolkit'; import rootReducer from './reducers'; export const store = configureStore({ reducer: rootReducer, }); // src/store/reducers/index.ts import { combineReducers } from 'redux'; import counterReducer from './counterSlice'; export default combineReducers({ counter: counterReducer, }); // src/store/reducers/counterSlice.ts import { createSlice } from '@reduxjs/toolkit'; export default createSlice({ name: 'counter', initialState: { value: 0 }, reducers: { increment: (state) => { state.value += 1; }, }, }).reducer; // Page component (React example) import { useDispatch, useSelector } from 'react-redux'; import { store } from '../store'; function Counter() { const count = useSelector((state) => state.counter.value); const dispatch = useDispatch(); return <button onClick={() => dispatch({ type: 'counter/increment' })}>{count}</button>; }

Debug

Known issues

gotchaHMR only works when there are no circular dependencies between your files. Otherwise Vite will fallback to full reload.

fix

Refactor your module graph to avoid circular imports.

affects: >=1.0.0

gotchaSymptom: HMR doesn't trigger; state resets on save. Cause: storeIndexFilePath or storeReducersFilePath paths are incorrect or do not exist.

fix

Ensure paths are relative to project root (not src alone) and files exist.

affects: >=1.0.0

gotchaSymptom: Plugin doesn't work silently. Cause: storeVariableName does not match the actual variable name used for the store.

fix

export const store = configureStore(...) => storeVariableName: 'store'.

affects: >=1.0.0

breakingIf using a custom root reducer wrapper (e.g., redux-remember), reducers are not wrapped and HMR may break.

fix

Set wrapReducersFunction to a function that wraps reducers, e.g., '(reducers) => rememberReducer(reducers)'.

affects: >=1.0.0

Errors

Common errors & fixes

Error: The default export is not a function.

The reducers file does not export a default function (e.g., combinedReducers result).

fix

export default combineReducers({ ... });

TypeError: reduxHmr is not a function

The plugin import resolves to undefined; likely due to CJS require usage or import error.

fix

Use import reduxHmr from 'vite-plugin-redux-hmr' (ESM only).

[vite] Full page reload due to circular import

Circular dependencies between files prevent HMR.

fix

Refactor to remove circular imports.

Upgrade

Version history

1.0.1latest on npm

Audit

Dependencies

viterequiredPeer dependency; plugin is designed for Vite's plugin system and only works with Vite >= 2.0

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/wdev-io/vite-plugin-redux-hmr ↗

packagevite-plugin-redux-hmr ↗

homepagehttps://github.com/wdev-io/vite-plugin-redux-hmr/ ↗