已安装redux-persist 6.0.0仍报模块找不到错误求助

排查依赖安装问题 #

• 卸载并重新指定版本安装redux-persist，确保依赖完整：

npm uninstall redux-persist
npm install redux-persist@6.0.0

• 清除包管理器缓存，避免缓存导致的安装异常：

npm cache clean --force
# 使用yarn的话执行：
# yarn cache clean

• 重启开发服务器，缓存引发的模块解析错误通常能通过重启解决。

统一导入路径风格 #

redux-persist 6的lib和es目录对应不同编译版本，混用会导致模块解析异常，建议统一使用一种路径风格：

方案一：使用es路径 #

修改所有redux-persist相关导入：

// store.tsx
import storage from "redux-persist/es/storage";
import storageSession from "redux-persist/es/storage/session";
import { persistReducer } from "redux-persist/es/persistReducer";
import persistStore from "redux-persist/es/persistStore";

方案二：使用lib路径 #

// store.tsx
import storage from "redux-persist/lib/storage";
import storageSession from "redux-persist/lib/storage/session";
import { persistReducer } from "redux-persist/lib/persistReducer";
import persistStore from "redux-persist/lib/persistStore";

修复代码语法错误 #

你的persistConfig对象中storage: storageSession后缺少逗号，语法错误会引发模块加载异常：

const persistConfig = {
   key: "root",
   storage: storageSession, // 补充该逗号
   whitelist: ["userSignupDetail", "signupStep"]
};

优化persistor的导出方式 #

避免在APP.tsx中重复导入persistStore，直接在store.tsx中导出persistor：

// store.tsx末尾添加
export const persistor = persistStore(store);

然后在APP.tsx中直接导入：

// APP.tsx
import { store, persistor } from "./store";
// 移除单独的persistStore导入语句

检查TypeScript路径配置（若使用TS） #

若项目使用TypeScript，检查tsconfig.json的baseUrl和paths配置，确保绝对路径能被正确解析：

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "*": ["*"]
    }
  }
}

内容的提问来源于stack exchange，提问作者Ravi Chitroda