score:2
you are getting the error because in next.js your code is first server side rendered, and on server there are no browser globals like window
, document
, etc. to fix it, you can do this:
export default function usewindowdimensions() {
const [windowdimensions, setwindowdimensions] = usestate({width: 0, height: 0}) // <-- don't invoke here
useeffect(() => {
function handleresize() {
setwindowdimensions(getwindowdimensions())
}
handleresize() // <-- invoke this on component mount
window.addeventlistener('resize', handleresize)
return () => { window.removeeventlistener('resize', handleresize) }
}, [])
return windowdimensions
}
it will work because useeffect
is guaranteed to run on client side only.
also refer: window is not defined in next.js react app and how to detect window size in next.js ssr using react hook? if you wish to create a hook that handles this for you.
score:1
check if window
is defined or not:
if (typeof window !== 'undefined') {
// you now have access to `window`
}
https://nextjs.org/docs/migrating/from-create-react-app#safely-accessing-web-apis
Source: stackoverflow.com
Related Query
- Window is not defined with custom react hook
- React Custom Hook with Typescript Type error "Property 'x' does not exist on type 'interface | (({ target }: any) => void)'.ts(2339)"
- useHistory not defined in react custom Hook
- React custom hook with event listener not works while updating the state
- React Custom Hook with Context and Typescript: Property 'map' does not exist on type 'Option'
- window is not defined in React with SSR
- Window is not defined with Server Side Rendering React and Express
- react useState update not triggering with custom hook
- React custom hook Pagination "data" is not defined
- Custom react hook can not be called in useEffect with empty dependencies
- Window is not defined in Next.js React app
- window not defined error when using extract-text-webpack-plugin React
- React Router with custom history not working
- Uncaught TypeError: create is not a function using useEffect React Hook with AJAX request
- React hook useRef not working with styled-components and typescript
- Mocking React custom hook with Jest
- Window is not defined after a build with Webpack
- window is not defined - react-draft-wysiwyg used with next js (ssr)
- React with Material UI not finding custom font
- setTimeout not clearing with React useEffect hook on mobile devices
- Access old state to compare with new state inside useEffect react hook with custom hooks usePrevious
- requestAnimationFrame is not defined it Next.js with React Native Web (Animated module)
- Perf is not defined - running react app with webpack-dev-server
- React | props inside UseCallBack not updating inside custom hook
- ReferenceError: window is not defined in React
- Property does not exist on React component when defined with recompose
- Replace of setState callback in react hook with useEffect hooks for complicated scenario not working
- ReferenceError: document is not defined in Next.js while working with React Aria overlays
- React useState hook not updating with axios call
- useAsyncStorage custom hook with useState hook in React Native
More Query from same tag
- Update state using nested map es6
- HashRouter causes Spotify Implicit Grant Flow to fail because callback URL is invalid
- why isn't <navBar/> rendering? (react.js)
- Show header for all pages except home page in ReactJS
- After updating yarn, react app is failing to compile due to node-module related import error
- Tree shaking not working for node package
- Dependency Injection with React Hooks
- Could not find "store" in either the context or props of
- how to dispatch action outside component in Redux-Toolkit + typescript?
- How to call methods in Parent component from Child component?
- Image URL not being displayed after file selection
- nested url routing using react-router and webpack dev server
- Javascript / React - getting first item in array that matches specific conditions
- React too many re renders infinite loop
- React Router Help: component appears when I would expect it not to
- Why is React asking for repeated props in static propTypes?
- Generic Props for Typescript type check
- Put many pictures into one div with specific size
- React with Flux: is this the dogmatic pattern or are there equal/better options?
- "Options" of column chart not getting applied in react .Also I need to set width and height to 100% of div
- Getting 'Can't call setState on a component that is not yet mounted' in a very simple react exercise
- Could anybody please help me to rewrite this code using useEffect()?
- how to use antd in electron react boilerplate?
- ResizableBox doesn't wrap contents
- ES6 - Destructuring and For of Loop only returns first object
- How to add hover css style with React.createElement
- WordPress custom API endpoint POST request fails in React
- Testing method in react component don't work
- React Redux - Uncaught (in promise) TypeError: Cannot read property 'props' of undefined
- React JS need to get data from one page to other