[Bug] window is not defined on startup, when using NextJS
tinybitsofcode opened this issue · comments
Describe the bug
Trying to integrate the Inspector with the latest NextJS, will prompt the ReferenceError: window is not defined
error, with minimal configuration of react-inspector.
Steps to reproduce the behavior
- Go to https://nextjs.org/docs, create a new NextJS app (using
npx create-next-app@latest
) - In the new project, install the latest
react-inspector
(usingnpm install react-inspector
) - Open the
pages/index.js
file, type the<Inspector data={[]} />
somewhere in the body of the file (in the React component > render function) - Run the NextJS project (
npm run dev
) - Open the browser, go to
http://localhost:3000
and the error should be prompted
Expected behavior
The Inspector should correctly show the data passed through, and allow the application to start.
Screenshots and/or logs
Environment
- OS: Windows 11
- Node.js version: v16.14.0
- NPM version: 8.3.1
- Browser (if applicable): Chrome
- Browser version (if applicable): 98.0.4758.102
Additional context
Below is the full stacktrace of the error.
1 of 1 unhandled error
Server Error
ReferenceError: window is not defined
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
Object.isNode [as default]
file:///C:/Dev/my-app/node_modules/is-dom/index.js (5:35)
Inspector
file:///C:/Dev/my-app/node_modules/react-inspector/dist/cjs/react-inspector.js (2241:32)
processChild
file:///C:/Dev/my-app/node_modules/react-dom/cjs/react-dom-server.node.development.js (3353:14)
resolve
file:///C:/Dev/my-app/node_modules/react-dom/cjs/react-dom-server.node.development.js (3270:5)
ReactDOMServerRenderer.render
file:///C:/Dev/my-app/node_modules/react-dom/cjs/react-dom-server.node.development.js (3753:22)
ReactDOMServerRenderer.read
file:///C:/Dev/my-app/node_modules/react-dom/cjs/react-dom-server.node.development.js (3690:29)
Object.renderToString
file:///C:/Dev/my-app/node_modules/react-dom/cjs/react-dom-server.node.development.js (4298:27)
Object.renderPage
file:///C:/Dev/my-app/node_modules/next/dist/server/render.js (751:45)
Object.defaultGetInitialProps
file:///C:/Dev/my-app/node_modules/next/dist/server/render.js (389:51)
Function.getInitialProps
node_modules\next\dist\pages\_document.js (145:19)
Yep, been there. Next automatically supports SSR, and isDOM ( used here import {isNode as isDOM} from './utils/typeUtils';
) breaks SSR for React Inspector, try code splitting to avoid the SSR phase:
let ReactInspector = null;
//inside a useEffect, or useSWR hook, or via next/dynamic
ReactInspector = import('react-inspector');