Window is not defined in Next.js React app

by

̶A̶n̶o̶t̶h̶e̶r̶ ̶s̶o̶l̶u̶t̶i̶o̶n̶ ̶i̶s̶ ̶b̶y̶ ̶u̶s̶i̶n̶g̶ ̶p̶r̶o̶c̶e̶s̶s̶.̶b̶r̶o̶w̶s̶e̶r ̶ ̶t̶o̶ ̶j̶u̶s̶t̶ ̶e̶x̶e̶c̶u̶t̶e̶ ̶ ̶y̶o̶u̶r̶ ̶c̶o̶m̶m̶a̶n̶d̶ ̶d̶u̶r̶i̶n̶g̶ ̶r̶e̶n̶d̶e̶r̶i̶n̶g̶ ̶o̶n̶ ̶t̶h̶e̶ ̶c̶l̶i̶e̶n̶t̶ ̶s̶i̶d̶e̶ ̶o̶n̶l̶y̶.

But process object has been deprecated in Webpack5 and also NextJS, because it is a NodeJS variable for backend side only.

So we have to use back window object from the browser.

if (typeof window !== "undefined") {
  // Client-side-only code
}

Other solution is by using react hook to replace componentDidMount:

useEffect(() => {
    // Client-side-only code
})

More Related Contents:

  1. “Cannot use import statement outside a module” error when importing react-hook-mousetrap in Next.js
  2. Can’t build React/Next project – found page without a React Component as default export (context api file)
  3. In React and Next.js constructor, I am getting “Reference Error: localstorage is not defined”
  4. First Load JS shared by all is rather heavy in next.js
  5. Warning: Function components cannot be given refs
  6. Error: How to serialize data from getStaticProps : Next.js
  7. Environment variables not working (Next.JS 9.4.4)
  8. Next.js context provider wrapping App component with page specific layout component giving undefined data
  9. I can’t reference an image in Next.js
  10. unable to deploy next js to azure
  11. How to Set port in next.js
  12. What is the best way to have a fallback image in NextJS?
  13. Next.js: Error: React.Children.only expected to receive a single React element child
  14. Custom _app and _document get ignored when moving files to src/pages folder in Next.js
  15. how can I use top level “await” in typescript next.js
  16. You’re importing a component that needs useState. It only works in a Client Component, but none of its parents are marked with “use client”
  17. TypeError: Cannot read properties of undefined (reading ‘call’) on Next.js
  18. How to prevent Next.js from instantiating a singleton class/object multiple times?
  19. Next.js app folder: is there some “entry point”? A direct replacement for _app.tsx?
  20. How to avoid caching in the app directory of Next.js?
  21. How to fetch data server-side in the app directory of Next.js? Tried getStaticProps but it’s returning undefined
  22. Want to have an event handler for the browser’s back button with next.js
  23. Next.js, getStaticProps not working with component but does with page
  24. numberic as object key, value as array [closed]
  25. React ‘cannot read property of undefined’ when using map
  26. How to pass data from a page to another page using react router
  27. How to use componentWillMount() in React Hooks?
  28. Warning: Each child in a list should have a unique “key” prop even tho it has unique key React
  29. Service Worker registration error: Unsupported MIME type (‘text/html’)
  30. Proper way of using React hooks + WebSockets

Leave a Comment