{"record":{"id":"e400d64e14d5de5a","repo":"vuejs/vue-router","slug":"router-must-be-called-with-the-new-operator","errorCode":null,"errorMessage":"Router must be called with the new operator.","messagePattern":"Router must be called with the new operator\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"error","filePath":"src/router.js","lineNumber":42,"sourceCode":"  static NavigationFailureType: any\n  static START_LOCATION: Route\n\n  app: any\n  apps: Array<any>\n  ready: boolean\n  readyCbs: Array<Function>\n  options: RouterOptions\n  mode: string\n  history: HashHistory | HTML5History | AbstractHistory\n  matcher: Matcher\n  fallback: boolean\n  beforeHooks: Array<?NavigationGuard>\n  resolveHooks: Array<?NavigationGuard>\n  afterHooks: Array<?AfterNavigationHook>\n\n  constructor (options: RouterOptions = {}) {\n    if (process.env.NODE_ENV !== 'production') {\n      warn(this instanceof VueRouter, `Router must be called with the new operator.`)\n    }\n    this.app = null\n    this.apps = []\n    this.options = options\n    this.beforeHooks = []\n    this.resolveHooks = []\n    this.afterHooks = []\n    this.matcher = createMatcher(options.routes || [], this)\n\n    let mode = options.mode || 'hash'\n    this.fallback =\n      mode === 'history' && !supportsPushState && options.fallback !== false\n    if (this.fallback) {\n      mode = 'hash'\n    }\n    if (!inBrowser) {\n      mode = 'abstract'\n    }","sourceCodeStart":24,"sourceCodeEnd":60,"githubUrl":"https://github.com/vuejs/vue-router/blob/680ccc68c506cca9be6207745043245d61fa715a/src/router.js#L24-L60","documentation":"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.","triggerScenarios":"const router = VueRouter({...}) instead of new VueRouter({...}); also common after bundler transformations or when destructuring the class and calling it.","commonSituations":"Migration from factory-style router libraries; minified/transpiled code dropping `new`; tutorial code copy errors.","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"],"exampleFix":"// before\nconst router = VueRouter({ routes })\n// after\nconst router = new VueRouter({ routes })","handlingStrategy":"try-catch","validationCode":"function createRouter(Options) {\n  if (typeof VueRouter !== 'function') throw new TypeError('VueRouter not loaded')\n  return new VueRouter(Options)\n}","typeGuard":"function isVueRouter(v) { return v instanceof VueRouter }","tryCatchPattern":"let router\ntry {\n  router = new VueRouter({ routes })\n} catch (e) {\n  console.error('Router initialization failed:', e)\n  throw e\n}","preventionTips":["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"],"tags":["vue-router","constructor","new-operator","api-misuse"],"backgroundTag":"missing-new-operator","analyzedSha":"680ccc68c506cca9be6207745043245d61fa715a","analyzedAt":"2026-09-02T19:19:01.204Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-10T02:17:09.455Z"}