{"record":{"id":"abea7b2e2e262f93","repo":"microsoft/playwright","slug":"the-gallery-page-does-not-define-window-mount","errorCode":null,"errorMessage":"The gallery page does not define window.mount().","messagePattern":"The gallery page does not define window\\.mount\\(\\)\\.","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/playwright/src/index.ts","lineNumber":514,"sourceCode":"      await use(await context.newPage());\n      return;\n    }\n\n    // First time we are reusing the context, we should create the page.\n    let [page] = context.pages();\n    if (!page)\n      page = await context.newPage();\n    await use(page);\n  },\n\n  mount: async ({ page, baseURL }, use) => {\n    // exposeFunctions turns any callbacks in props into real, browser-callable\n    // functions that dispatch back to the test.\n    const callMount = (params: { story: string, props?: Record<string, any> }) =>\n      page.evaluate(async p => {\n        const w = window as any;\n        if (typeof w.mount !== 'function')\n          throw new Error('The gallery page does not define window.mount().');\n        await w.mount(p);\n      }, params, { exposeFunctions: true, serialize: ['Map', 'Set'] });\n    await use(async (storyId: string, props?: any) => {\n      if (!baseURL)\n        throw new Error('mount() requires `baseURL` to point at the component gallery. Set it in your Playwright config.');\n      // The gallery is a single page (served at baseURL) that exposes window.mount()/window.unmount().\n      await page.goto(baseURL);\n      await callMount({ story: storyId, props });\n      // Points at the gallery root, scope the queries: component.getByRole(...).\n      return Object.assign(page.locator('#root'), {\n        // update() re-renders the same story with new props without navigating; if the gallery\n        // reuses its root/instance, the framework reconciles and component state is preserved.\n        update: (newProps?: any) => callMount({ story: storyId, props: newProps }),\n        unmount: () => page.evaluate(async () => {\n          await (window as any).unmount?.();\n        }),\n      });\n    });","sourceCodeStart":496,"sourceCodeEnd":532,"githubUrl":"https://github.com/microsoft/playwright/blob/f1d33b5029be8bbc1095fe88e559117fa3a6243b/packages/playwright/src/index.ts#L496-L532","documentation":"The Playwright component-gallery mount() fixture drives a gallery page that must expose window.mount() to render a story. The page.evaluate call checks typeof window.mount === 'function' before invoking it; if the page loaded at baseURL does not define it, this error is thrown in the browser and propagated to the test.","triggerScenarios":"Calling the mount(storyId, props) fixture after navigating to baseURL when the loaded page does not define window.mount as a function — wrong page served, gallery bundle not loaded/outdated, custom gallery missing the hook, or a 404/error page rendered.","commonSituations":"baseURL pointing at a site that is not the component gallery, gallery dev server not running or serving a stale bundle, custom gallery implementation lacking window.mount, or SPA routing/service workers intercepting the navigation.","solutions":["Verify baseURL points at the running component gallery server.","Open the page and run `typeof window.mount` in the console; if undefined, rebuild/update the gallery bundle.","Ensure navigation to baseURL is not failing or being intercepted before mount() runs.","If you maintain a custom gallery, implement window.mount({ story, props }) returning a promise."],"exampleFix":"// before (gallery page missing the hook)\n// nothing defines mount\n// after\nwindow.mount = async ({ story, props }) => {\n  const { render } = await import('./stories/' + story);\n  render(document.getElementById('root'), props);\n};","handlingStrategy":"validation","validationCode":"const res = await request.get(baseURL);\nif (!res.ok()) throw new Error(`Gallery page not reachable at ${baseURL}: ${res.status()}`);\nconst definesMount = await page.evaluate(() => typeof (window as any).mount === 'function');\nif (!definesMount) throw new Error('Gallery bundle does not define window.mount() — rebuild/update it.');","typeGuard":"function gallerySupportsMount(w: Window): w is Window & { mount: (p: { story: string; props?: unknown }) => Promise<void> } {\n  return typeof (w as any).mount === 'function';\n}","tryCatchPattern":"try {\n  const component = await mount('my-story', { foo: 1 });\n} catch (e) {\n  if ((e as Error).message.includes('window.mount()')) {\n    throw new Error('Gallery page at baseURL lacks window.mount() — check baseURL and gallery bundle version.');\n  }\n  throw e;\n}","preventionTips":["Confirm the gallery dev server is running and baseURL matches its URL before the suite.","Smoke-check `typeof window.mount === 'function'` when upgrading the gallery bundle.","Keep baseURL scoped to a dedicated component-testing project config.","Watch for SPA routers/service workers serving a 404 page instead of the gallery."],"tags":["component-testing","gallery","browser"],"backgroundTag":"resource-not-found","analyzedSha":"f1d33b5029be8bbc1095fe88e559117fa3a6243b","analyzedAt":"2026-09-21T21:58:31.278Z","contentChangedAt":"2026-09-21T21:58:31.278Z","schemaVersion":2},"datasetVersion":"2026-09-23T08:17:48.524Z"}