React – “localStorage is not defined” error showing

by

When you’re rendering on the server, you do not have a browser and thus you do not have access to all the APIs that the browser provides, including localStorage.

In JavaScript code that is running both on the server and on the client (browser), it is common practice to guard against with an if clause that checks if window is defined. “Window” is the root object provided by the browser for all the APIs that are provided by the browser.

Example:

if (typeof window !== 'undefined') {
    console.log('we are running on the client')
} else {
    console.log('we are running on the server');
}

In your case, you want to put your call to localStorage in such an if clause, for example:

if (typeof window !== 'undefined') {
    localStorage.setItem('myCat', 'Tom');
}

More Related Contents:

  1. How to detect window size in Next.js SSR using react hook?
  2. How to listen to localstorage value changes in react?
  3. Why calling react setState method doesn’t mutate the state immediately?
  4. When to use React setState callback
  5. How can I persist redux state tree on refresh?
  6. How to use callback with useState hook in react [duplicate]
  7. Why do the React docs recommend doing AJAX in componentDidMount, not componentWillMount?
  8. ReactJS: Why is passing the component initial state a prop an anti-pattern?
  9. React: Expected an assignment or function call and instead saw an expression
  10. Why, exactly, do we need React.forwardRef?
  11. You should not use outside a
  12. Next.js – Error: only absolute urls are supported
  13. Installing create-react-app gives npm ERR! shasum check failed and npm ERR! Unexpected end of JSON input while parsing near ‘…mojOzGIEI2rg0m24Yb5Oq’
  14. Nested Routes not rendering with React Router v4
  15. When to use useImperativeHandle, useLayoutEffect, and useDebugValue
  16. How to use comments in React
  17. Visual studio code changes format (React-JSX)
  18. React – TypeError: Cannot read properties of undefined (reading ‘params’)
  19. How should I configure create-react-app to serve app from subdirectory?
  20. react routing is able to handle different url path but tomcat returns 404 not available resources
  21. React: Why component’s constructor is called only once?
  22. Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema
  23. Relative path in index.html after build
  24. combine react build output into single js file
  25. How to render react components by using map and join?
  26. How to solve the “update was not wrapped in act()” warning in testing-library-react?
  27. × TypeError: Cannot read properties of undefined (reading ‘map’)
  28. React testing library on change for Material UI Select component
  29. React router and this.props.children – how to pass state to this.props.children
  30. Is it OK to use React.render() multiple times in the DOM?

Leave a Comment