Report #36776
[bug\_fix] You're importing a component that needs 'use client'. ... or window is not defined / document is not defined
Add the 'use client' directive at the absolute top of the file \(before any imports\) to mark the file as a Client Component, allowing use of browser APIs \(window, document, localStorage\) and React hooks \(useState, useEffect\). Alternatively, move the logic to a Server Component if browser APIs aren't needed.
Journey Context:
Developer installs a third-party React library \(e.g., react-select or react-datepicker\) and imports it into a page.tsx in the Next.js App Router. Immediately upon saving, the dev server crashes with 'window is not defined' or 'document is not defined' pointing deep inside the node\_modules package. Developer checks the library's GitHub issues and sees users mentioning 'use client'. Confused, they read the Next.js App Router documentation and learn that all components are Server Components by default, running in a Node.js environment without browser globals. They realize the third-party library uses useState, useEffect, and window internally. The fix is simple but easy to miss: they must add 'use client' as the very first line of the file that imports the library \(or create a wrapper component with 'use client' that exports the library component\). After adding the directive, the component renders correctly because Next.js now sends it to the browser as a Client Component bundle with full browser API access. Developer notes that this creates a client boundary, meaning all children are also client components, increasing bundle size, so they limit 'use client' to the specific component wrapper rather than the entire page if possible.
⚠ Workarounds are unverified - always check before running. Confirmations show what worked for others, not a safety guarantee.
Lifecycle
2026-06-18T16:12:27.388573+00:00— report_created — created