Describe the bug

The server error issue is raised when running yarn dev of Next.js when importing ReactQueryDevtools:

ReferenceError: document is not defined
    at template (file:///Users/my_user/my_project/node_modules/@tanstack/query-devtools/build/esm/index.mjs:809:13)
    at file:///Users/my_user/my_project/node_modules/@tanstack/query-devtools/build/esm/index.mjs:5042:31
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:526:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:438:15) {

This is raised because there's no document on the server side. This can be currently worked around by using dynamic import:

import dynamic from 'next/dynamic'

const ReactQueryDevtools = dynamic(
  () => import('@tanstack/react-query-devtools').then(({ReactQueryDevtools}) => ReactQueryDevtools),
  {
    ssr: false,
  },
)

ReactQueryDevtools could be imported in next.js normally and without issue in v4.

Your minimal, reproducible example

Steps to reproduce

in a next.js app:

1. run yarn add @tanstack/[email protected]
2. add import {ReactQueryDevtools} from '@tanstack/react-query-devtools' to _app.tsx
3. add <ReactQueryDevtools /> to the render
4. run yarn dev
5. open the localhost app
6. see the error

Expected behavior

no error

How often does this bug happen?

Every time

Screenshots or Videos

Platform

macOS, Chrome. shouldn't matter

Tanstack Query adapter

react-query

TanStack Query version

5.0.0-alpha.26 for query, 5.0.0-alpha.30 for devtools

TypeScript version

5.0.4

Additional context

No response