{"id":18729,"library":"redux-mixpanel-middleware","title":"Redux Mixpanel Middleware","description":"A Redux middleware that sends Mixpanel events from dispatched actions. Version 1.0.1 integrates with mixpanel-browser client library and intercepts actions with a `meta.mixpanel` property to track events and properties. No active maintenance, few downloads, and limited flexibility compared to more modern analytics middlewares like redux-beacon.","status":"maintenance","version":"1.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/danii1/redux-mixpanel","tags":["javascript","redux","middleware","mixpanel","analytics"],"install":[{"cmd":"npm install redux-mixpanel-middleware","lang":"bash","label":"npm"},{"cmd":"yarn add redux-mixpanel-middleware","lang":"bash","label":"yarn"},{"cmd":"pnpm add redux-mixpanel-middleware","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Redux store integration","package":"redux","optional":true},{"reason":"Required mixpanel client to initialize and send events","package":"mixpanel-browser","optional":false}],"imports":[{"note":"Default export; CJS require works but type definitions may be missing.","wrong":"const MixpanelMiddleware = require('redux-mixpanel-middleware');","symbol":"MixpanelMiddleware","correct":"import MixpanelMiddleware from 'redux-mixpanel-middleware';"}],"quickstart":{"code":"import mixpanel from 'mixpanel-browser';\nimport MixpanelMiddleware from 'redux-mixpanel-middleware';\nimport { createStore, applyMiddleware } from 'redux';\n\nconst MIXPANEL_TOKEN = process.env.MIXPANEL_TOKEN ?? 'your-token';\nmixpanel.init(MIXPANEL_TOKEN);\nconst mixpanelMiddleware = new MixpanelMiddleware(mixpanel);\n\nconst reducer = (state = {}, action) => state;\nconst store = createStore(reducer, applyMiddleware(mixpanelMiddleware));\n\nstore.dispatch({\n  type: 'ADD_TO_CART',\n  payload: { id: 1, name: 'Widget' },\n  meta: {\n    mixpanel: {\n      event: 'Add to cart',\n      props: {\n        id: 1,\n        name: 'Widget',\n        price: 10\n      }\n    }\n  }\n});","lang":"javascript","description":"Initialize Mixpanel browser client, create middleware instance, apply to Redux store, and dispatch action with mixpanel meta to track event."},"warnings":[{"fix":"Ensure every action you want tracked includes `meta: { mixpanel: { event: 'EventName', props: {} } }`.","message":"Middleware requires `meta.mixpanel` object; without it no event is sent and no error is thrown.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Only use in browser or configure a mock mixpanel client for SSR.","message":"Uses `mixpanel-browser` which may not work in server-side Node.js environments without proper polyfills.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Replace with redux-beacon or write a custom Redux middleware using mixpanel's track method directly.","message":"Library is no longer actively maintained; consider migrating to redux-beacon or custom middleware for more flexibility.","severity":"deprecated","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure mixpanel-browser is installed and imported: import mixpanel from 'mixpanel-browser';","cause":"Missing or incorrect import of mixpanel-browser library.","error":"Uncaught TypeError: mixpanel.init is not a function"},{"fix":"Apply async middleware (e.g., redux-thunk) before MixpanelMiddleware in applyMiddleware.","cause":"Using middleware with async actions that return functions (e.g., redux-thunk) before this middleware in the chain.","error":"Actions must be plain objects. Use custom middleware for async actions."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}