Как исправить ReferenceError: localStorage is not defined?

Question

[TreeFall1]

Я создаю стейт с помощью 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"),
}))

Проблема в том, что в консоли next.js выводит ошибку: ReferenceError: localStorage is not defined. Я думаю, что проблема в том, что localStorage не успевает загрузиться. Как это можно исправить?

Comments

[Rsa97]

При рендеринге на стороне сервера (SSR) localStorage недоступен, это API браузера.

Answer 1

[Алексей Уколов]

Нет, проблема не в том, что localStorage не успевает загрузиться. Проблема в том, что код выполняется на сервере, где никакого localStorage вообще нет.
Вам нужно пометить компонент как клиентский и тогда сервер не будет его исполнять.

Comments

[TreeFall1]

Я написал 'use client', но это все равное не помогает.

[Алексей Уколов]

Варианта действий два:
1. Разбираться и добавлять "use client" туда, куда нужно.
2. Сделать костыльную проверку:

typeof window !== "undefined" ? localStorage.getItem(dataName) : null;

[TreeFall1]

Алексей Уколов, Если делать проверку, то выдает уже новую ошибку: react-hydration-error

[Алексей Уколов]

Значит, вам остаётся только первый путь.

[Kataev]

TreeFall1, потому что начиная с 13 версии next такую проверку сделать нельзя, если пытаться обратиться к необъявленному объекту window на сервере, будет эта самая ошибка.

Answer 2

[Kataev]

Пометить компонент и все места применения экспортируемого хука, как use client.