Zustand Devtools shows 'anonymous' actions by default when moving from vite 5.x to vite 7.x

[booherbg]

Hi! I noticed that when I am running an older version of vite/vitest/@vitestjs/plugin-react, I don't have to do any additional config for the devtools middleware to correctly identify action types. However, after upgrading to the latest version, all actions default to 'anonymous'. I know that there are configuration values I can use to override, however it would be amazingly simpler if it went back to working by default.

Is this fixable? Is it a bug? I use zustand a ton across dozens of projects for educational purposes, and being able to use devtools and showing correct non-anonymous actions out of the box without worrying about additional config would be helpful :)

Attached is a screenshot of the upgrades in package.json that introduces the bug, along with my simple example project.

store.js

import { create } from "zustand";
import { devtools } from "zustand/middleware";

const useStore = create(
  devtools((set, get) => ({
    count: 0,
    inc: () => set(state => ({ count: state.count += 1}))
  }))
);

export default useStore;

devtools with the older versions of vite suite (working without additional config):

devtools with the newer versions of vite suite (showing anonymous actions):

Full package.json:

{
  "name": "zustand-example",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^19.2.0",
    "react-dom": "^19.2.0",
    "zustand": "^5.0.8"
  },
  "scripts": {
    "start": "vite",
    "client": "vite",
    "build": "vite build",
    "test": "vitest"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "@vitejs/plugin-react": "^5.0.4",
    "vite": "^7.1.9",
    "vitest": "^3.2.4"
  }
}

[dbritto-dev]

Seems a bug I'll look into that

[dai-shi]

Is this related with #3250?

[leozhao9527]

Any updates here? I am also seeing the same issue

[sunnypatell]

@booherbg this is caused by vite 7's switch from esbuild to rolldown for dependency pre-bundling. the stack trace format changed, breaking zustand's action name detection.

in devtools.ts (~line 176), zustand extracts action names by parsing new Error().stack:

const findCallerName = (stack: string | undefined) => {
  const traceLines = stack.split('\n')
  const idx = traceLines.findIndex((l) => l.includes('api.setState'))
  const callerLine = traceLines[idx + 1]?.trim() || ''
  return /.+ (.+) .+/.exec(callerLine)?.[1]
}

rolldown produces different wrapper function names and source map alignment than esbuild, so the regex fails and falls through to 'anonymous'. @dai-shi's reference to #3250 was a proposed fix that replaced stack parsing with function wrapping, but it was closed without merging.

fix: explicitly name your actions (recommended regardless of bundler):

const useStore = create(
  devtools((set) => ({
    count: 0,
    inc: () => set(s => ({ count: s.count + 1 }), undefined, 'inc'),
    dec: () => set(s => ({ count: s.count - 1 }), undefined, 'dec'),
  }))
)

third argument to set() is the action name. the devtools docs cover this pattern. it works across all bundlers since it bypasses stack trace parsing entirely.

[booherbg]

Excellent response, thank you.

[dbritto-dev]

Yeah was overriding everything making functions unstable, that could ended up in performance issues #3250