What causes "Router must be called with the new operator." in vuejs/vue-router?

Call it with new: const router = new VueRouter({ ... })

Router must be called with the new operator.

Error message

Router must be called with the new operator.

What it means

VueRouter is a class that must be instantiated with `new`. When called as a plain function, `this` is not a VueRouter instance, so the guard fails. In dev the warning fires; without it the constructor would still run but return the instance incorrectly (implicit global `this`), breaking app setup.

Source

Thrown at src/router.js:42

  static NavigationFailureType: any
  static START_LOCATION: Route

  app: any
  apps: Array<any>
  ready: boolean
  readyCbs: Array<Function>
  options: RouterOptions
  mode: string
  history: HashHistory | HTML5History | AbstractHistory
  matcher: Matcher
  fallback: boolean
  beforeHooks: Array<?NavigationGuard>
  resolveHooks: Array<?NavigationGuard>
  afterHooks: Array<?AfterNavigationHook>

  constructor (options: RouterOptions = {}) {
    if (process.env.NODE_ENV !== 'production') {
      warn(this instanceof VueRouter, `Router must be called with the new operator.`)
    }
    this.app = null
    this.apps = []
    this.options = options
    this.beforeHooks = []
    this.resolveHooks = []
    this.afterHooks = []
    this.matcher = createMatcher(options.routes || [], this)

    let mode = options.mode || 'hash'
    this.fallback =
      mode === 'history' && !supportsPushState && options.fallback !== false
    if (this.fallback) {
      mode = 'hash'
    }
    if (!inBrowser) {
      mode = 'abstract'
    }

View on GitHub (pinned to 680ccc68c5)

Solutions

Call it with new: const router = new VueRouter({ ... })
If a factory is desired, wrap: const createRouter = opts => new VueRouter(opts)
Check bundler/babel plugins that might transform class calls
In Vue Router 4 use createRouter({...}) instead of the class

Example fix

// before
const router = VueRouter({ routes })
// after
const router = new VueRouter({ routes })

Defensive patterns

Strategy: try-catch

Validate before calling

function createRouter(Options) {
  if (typeof VueRouter !== 'function') throw new TypeError('VueRouter not loaded')
  return new VueRouter(Options)
}

Type guard

function isVueRouter(v) { return v instanceof VueRouter }

Try / catch

let router
try {
  router = new VueRouter({ routes })
} catch (e) {
  console.error('Router initialization failed:', e)
  throw e
}

Prevention

Always instantiate classes with new
Wrap router construction in a factory function to centralize correctness
On Vue Router 4 prefer createRouter() which avoids the pitfall entirely

When it happens

Trigger: const router = VueRouter({...}) instead of new VueRouter({...}); also common after bundler transformations or when destructuring the class and calling it.

Common situations: Migration from factory-style router libraries; minified/transpiled code dropping `new`; tutorial code copy errors.

Related errors

AI-assisted analysis of vuejs/vue-router@680ccc68c5 (2026-09-02). Data as JSON: /api/errors/e400d64e14d5de5a. Report an issue: GitHub.