LocalStorage не определяется при сборке. Nextjs и машинопись

Я создаю приложение в NextJs, используя API Restcountries. Я использую redux для имитации компонента корзины/избранного списка. Но когда я запускаю «сборку», у меня возникает ошибка, говорящая, что «localStorage не определен»

import { createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from "@redux-devtools/extension";
import thunk from "redux-thunk";
import { DefaultState } from "redux/reducers";
import reducer from "../reducers";

function saveToLocalStorage(state: DefaultState) {
  try {
    const localStorageState = JSON.stringify(state);
    localStorage.setItem("statePersist", localStorageState);
  } catch (e) {
    console.warn(e);
  }
}

function loadFromLocalStorage() {
  try {
    const localStorageState = localStorage.getItem("statePersist");
    if (localStorageState === null) return undefined;
    return JSON.parse(localStorageState);
  } catch (e) {
    console.warn(e);
  }
  return undefined;
}

const storeFactory = () => {
  const middlewares = [thunk];
  const reduxStore = createStore(
    reducer,
    loadFromLocalStorage(),
    composeWithDevTools(applyMiddleware(...middlewares))
  );
  reduxStore.subscribe(() => saveToLocalStorage(reduxStore.getState()));
  return reduxStore;
};

const midi = storeFactory();

export type Store = ReturnType<typeof storeFactory>;
export type RootState = ReturnType<typeof midi.getState>;
export default storeFactory;
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
Как передать состояние или данные в react-router v6
Как передать состояние или данные в react-router v6
react-router - это лучшая библиотека для работы с маршрутизацией в reactjs. С помощью react-router вы передаете состояние или данные от одного...
0
0
20
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема, которую вы видите, заключается в том, что localStorage (он же window.localStorage) не определен на стороне сервера. Следующий сервер отображает ваши компоненты, поэтому, когда это происходит, и он пытается получить доступ к localStorage, он не может его найти. Вам придется подождать, пока браузер отобразит его, чтобы использовать localStorage.

Для других вариантов использования у вас может быть это окно использования в будущем, вы можете проверить, если (typeof window !== 'undefined')`, что является хорошим способом проверить, находитесь ли вы на клиенте или на сервере.

const ISSERVER = typeof window === "undefined";
if (!ISSERVER) localStorage.setItem(key, value);

Или другим подходом было бы использование динамический импорт с помощью ssr: false Next, хотя это обычно требуется только для более сложных случаев использования (например, если вы импортируете библиотеку диаграмм/графиков или что-то подобное, использующее окно).

Другие вопросы по теме

Передача vscode во внешние функции
Firebase: Почему мой код использует только первый документ в моей коллекции?
Реагировать на ошибку машинописного текста - элемент неявно имеет любой тип, потому что выражение строки типа не может использоваться для индексирования типа {}
Как получить доступ к вложенным необязательным индексам из интерфейса
Почему машинописный текст не может контекстуально вывести эти типы промежуточного программного обеспечения
Передать конструктор класса как функцию в другом классе
React & clsx: добавьте имя класса, если текущий элемент в сопоставленном массиве является первым из нескольких элементов
Свойство «MathFun» отсутствует в типе «(x?: число, y?: число) => число», но требуется в типе «Func».
Получение строки типа не может быть назначено строке типа для компонента TS в сборнике рассказов
Как ввести useState для файлов?