Next.js Discord

Discord Forum

Redux Persist Rehydrate Errors

Unanswered
Cuban Crocodile posted this in #help-forum
Open in Discord
Avatar
Cuban CrocodileOP
hey so im getting 2 errors which i have no clue how to fix, pls help

1. Error: Hydration failed because the initial UI does not match what was rendered on the server.
Warning: Expected server HTML to contain a matching <input> in <div>.


2. Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
Image

3 Replies

Avatar
Cuban CrocodileOP
for more specific info well, i used a redux state in the html elements and then i removed it, then the first error started happening where it says server is rendering different things from what client is rendering
if you need any specific parts of my code let me know which ones, or if you want all of my code of how im configuring redux with redux persist, i can send that too
"use client"

import { configureStore, applyMiddleware } from '@reduxjs/toolkit';
import { combineReducers } from "redux";
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import jwtReducer from './features/jwtSlice';
import userReducer from './features/userSlice';
import { FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER } from 'redux-persist';

const rootReducer = combineReducers({
  jwtSlice: jwtReducer,
  userSlice: userReducer
});

const persistConfig = {
  key: 'root',
  storage,
  blacklist: ['']
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

export type RootState = ReturnType<typeof rootReducer>;


const customMiddleware = (store: any) => (next: any) => (action: any) => {
    if (
      action.type === FLUSH ||
      action.type === REHYDRATE ||
      action.type === PAUSE ||
      action.type === PERSIST ||
      action.type === PURGE ||
      action.type === REGISTER
    ) {
      return next(action);
    }
    return next(action);
  };

export const store = configureStore({
  reducer: persistedReducer,
  
  middleware: [customMiddleware],
});

export const persistor = persistStore(store);