Как исправить ReferenceError: localStorage is not defined?
Я создаю стейт с помощью Zustand. Данные в него загружаются с помощью функции из localStorage:
const getDataFromLocalStorage = (dataName)=>{ let data = localStorage.getItem(dataName); if(data){ return data; } else{ return "Empty"; } } export const useStore = ((set)=>({ playerName: getDataFromLocalStorage("playerName"), playerLvl: getDataFromLocalStorage("playerExp")/10, playerExp: getDataFromLocalStorage("playerExp"), coins: getDataFromLocalStorage("coins"), })) |
const getDataFromLocalStorage = (dataName)=>{ let data = localStorage.getItem(dataName); if(data){ return data; } else{ return "Empty"; } } export const useStore = ((set)=>({ playerName: getDataFromLocalStorage("playerName"), playerLvl: getDataFromLocalStorage("playerExp")/10, playerExp: getDataFromLocalStorage("playerExp"), coins: getDataFromLocalStorage("coins"), }))
Проблема в том, что в консоли next.js выводит ошибку: ReferenceError: localStorage is not defined. Я думаю, что проблема в том, что localStorage не успевает загрузиться. Как это можно исправить?
Дополнительно:
При рендеринге на стороне сервера (SSR) localStorage недоступен, это API браузера.
Нет, проблема не в том, что localStorage не успевает загрузиться. Проблема в том, что код выполняется на сервере, где никакого localStorage вообще нет.
Вам нужно пометить компонент как клиентский и тогда сервер не будет его исполнять.
- Я написал 'use client', но это все равное не помогает.
- Варианта действий два:
1. Разбираться и добавлять "use client" туда, куда нужно.
2. Сделать костыльную проверку:typeof window !== "undefined" ? localStorage.getItem(dataName) : null;
typeof window !== "undefined" ? localStorage.getItem(dataName) : null;
- Алексей Уколов, Если делать проверку, то выдает уже новую ошибку: react-hydration-error
- Значит, вам остаётся только первый путь.
- TreeFall1, потому что начиная с 13 версии next такую проверку сделать нельзя, если пытаться обратиться к необъявленному объекту window на сервере, будет эта самая ошибка.
Пометить компонент и все места применения экспортируемого хука, как use client.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
ReferenceError: localStorage is not defined возникает, когда вы пытаетесь использовать объект localStorage в среде, где он не поддерживается, например, при работе с Node.js или в некоторых версиях Internet Explorer.
Чтобы исправить эту ошибку, вам необходимо проверить, поддерживает ли браузер объект localStorage. Если нет, вы можете использовать альтернативные методы хранения данных, такие как Cookies или IndexedDB.
Для того чтобы избежать ошибки ReferenceError: localStorage is not defined, вы можете воспользоваться следующим кодом:
if (typeof localStorage === 'undefined') { console.log('localStorage is not supported'); } else { // ваш код, который использует localStorage }
Этот код проверяет, поддерживается ли объект localStorage в текущем браузере, и выполняет соответствующие действия в зависимости от результата.
Также убедитесь, что вы используете объект localStorage правильно. Для сохранения данных в localStorage используйте методы setItem() и getItem(), например:
localStorage.setItem('key', 'value'); var data = localStorage.getItem('key');
Если вы все еще сталкиваетесь с проблемой, убедитесь, что ваш код запускается в среде, которая поддерживает объект localStorage, или используйте альтернативные методы хранения данных.