vuejs/vuex · warning

[vuex] state field "${moduleName}" was overridden by a modul

Error message

[vuex] state field "${moduleName}" was overridden by a module with the same name at "${path.join('.')}"

What it means

When registering a non-root module, Vuex writes module.state into the parent state object under the module name. If a property with that name already exists on parent state (e.g. defined in the root module's state), the module silently overrides it and Vuex warns in development.

Source

Thrown at src/store-util.js:108

  const isRoot = !path.length
  const namespace = store._modules.getNamespace(path)

  // register in namespace map
  if (module.namespaced) {
    if (store._modulesNamespaceMap[namespace] && __DEV__) {
      console.error(`[vuex] duplicate namespace ${namespace} for the namespaced module ${path.join('/')}`)
    }
    store._modulesNamespaceMap[namespace] = module
  }

  // set state
  if (!isRoot && !hot) {
    const parentState = getNestedState(rootState, path.slice(0, -1))
    const moduleName = path[path.length - 1]
    store._withCommit(() => {
      if (__DEV__) {
        if (moduleName in parentState) {
          console.warn(
            `[vuex] state field "${moduleName}" was overridden by a module with the same name at "${path.join('.')}"`
          )
        }
      }
      parentState[moduleName] = module.state
    })
  }

  const local = module.context = makeLocalContext(store, namespace, path)

  module.forEachMutation((mutation, key) => {
    const namespacedType = namespace + key
    registerMutation(store, namespacedType, mutation, local)
  })

  module.forEachAction((action, key) => {
    const type = action.root ? key : namespace + key
    const handler = action.handler || action

View on GitHub (pinned to bd907467b8)

Solutions

1. Rename the module (and its registration path) to a non-conflicting key
2. Remove the duplicate state field from the parent module's state function
3. Access the module state via the module path and delete any legacy reference
4. If intentional, silence is not offered — restructure to avoid collision

Example fix

// before
const store = createStore({ state: () => ({ cart: null }), modules: { cart: cartModule } })
// after
const store = createStore({ state: () => ({}), modules: { cart: cartModule } })

function assertNoStateCollision(parentModuleDef, moduleName) {
  const state = typeof parentModuleDef.state === 'function' ? parentModuleDef.state() : parentModuleDef.state || {}
  if (moduleName in state) throw new Error(`rename module '${moduleName}' or remove duplicate state field`)
}

When it happens

Trigger: registerModule('foo', ...) or a nested module 'foo' in the modules tree while the parent module's state already declares a 'foo' key.

Common situations: Refactoring from flat root state to modules without removing the old root state key; name collision between a state field and a module name; code splitting registers a module whose name collides with existing state.

Related errors

• [vuex] trying to unregister module '${key}', which is not re
• [vuex] trying to add a new module '${key}' on hot reloading,
• Missing module "${moduleName}" for path "${path}".
• [vuex] ${msg}
• [vuex] error in before action subscribers:

AI-assisted analysis of vuejs/vuex@bd907467b8 (2026-08-28). Data as JSON: /api/errors/aa5662e29cdc3e53. Report an issue: GitHub.