Redux Toolkit报错：Uncaught Error: uSES not initialized 求助

我用Redux Toolkit开发时碰到了Uncaught Error: uSES not initialized错误，不清楚错误原因和位置。之前有其他开发者遇到过完全相同的问题，但我觉得自己的问题根源可能不一样。

以下是项目关键代码：

index.js

import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from "react-router-dom"
import { Provider } from 'react-redux/es/exports'

import './index.css'
import App from './App'
import reportWebVitals from './reportWebVitals'
import 'bootstrap/dist/css/bootstrap.min.css'

import store from './store/state'
import { ProfileContextProvider } from './store/profile-context'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <ProfileContextProvider>
      <BrowserRouter>
        <Provider store={store}>
          <App />
        </Provider>
      </BrowserRouter>
    </ProfileContextProvider>
  </React.StrictMode>
);

reportWebVitals();

App.js

// import './App.css';
import React, { Suspense } from 'react'
import { Routes, Route } from 'react-router-dom'
import Layout from './Layout'

import LoadingSpinner from './Components/LoadingSpinner/'

const Login = React.lazy(() => import('./Pages/Auth/login'))
const Signup = React.lazy(() => import('./Pages/Auth/signup'))
const Home = React.lazy(() => import('./Pages/Home'))
const ProductOutlet = React.lazy(() => import('./Pages/Products/ProductOutlet'))
const Products = React.lazy(() => import('./Pages/Products'))
const ProductDetail = React.lazy(() => import('./Pages/ProductDetail'))
const Cart = React.lazy(() => import('./Pages/Cart'))
const Profile = React.lazy(() => import('./Pages/Profile'))
const Orders = React.lazy(() => import('./Pages/Orders'))

function App() {
  return (
    <>
      <Layout>
        <Suspense 
          fallback={
            <LoadingSpinner/>
          }
        >
          <Routes>
            <Route path='login' element={<Login />} />
            <Route path='signup' element={<Signup />} />

            <Route path='/' element={<Home />} />
            <Route path='products' element={<ProductOutlet />} >
              <Route index element={<Products />} />
              <Route path=":productId" element={<ProductDetail />} />
            </Route>
            <Route path='cart' element={<Cart />} />
            <Route path='profile' element={<Profile />} />
            <Route path='orders' element={<Orders />} />
          </Routes>
        </Suspense>
      </Layout>
    </>
  );
}

export default App;

src/store/state/index.js

import { configureStore } from "@reduxjs/toolkit"

import authSliceReducer from './auth-slice'

const store = configureStore({
    reducer: {
        auth: authSliceReducer
    }
})

export default store

src/store/state/auth-slice.js

import { createSlice } from "@reduxjs/toolkit"

const initialAuthState = {
    token: null,
    isAuthenticated: false
}

const authSlice = createSlice({
    name: 'authentication',
    initialState: initialAuthState,
    reducers: {
        login(state, action) {
            state.token = action.payload.token
            state.isAuthenticated = true
        },

        logout(state) {
            state.token = null
            state.isAuthenticated = false
        }
    }
})

export const authActions = authSlice.actions
export default authSlice.reducer

src/pages/Home/index.js

import { useContext } from "react"
import { useSelector } from "react-redux/es/exports"

import ProfileContext from "../../store/profile-context"

const Home = () => {
    const isLoggedIn = useSelector((state) => state.auth.isAuthenticated)
    const profileContext = useContext(ProfileContext)

    return (
        <>
            <h3>Welcome to the the store</h3>
            {/* <h4>Is logged in: {isLoggedIn}</h4> */}
            <p>User profile</p>
            <p>{profileContext.email}</p>
        </>
    )
}

export default Home

问题根源与解决办法 #

你代码里的Provider和useSelector都是从react-redux/es/exports这个内部模块导入的，这会导致React Redux的上下文初始化逻辑异常，触发uSES not initialized错误。React Redux的官方导出入口是react-redux，而非内部的es/exports路径。

修改步骤：

1. 在index.js中，把Provider的导入路径改成：

import { Provider } from 'react-redux'

2. 在Home/index.js中，把useSelector的导入路径改成：

import { useSelector } from 'react-redux'

修改后重新运行项目，这个错误应该就能解决。

内容的提问来源于stack exchange，提问作者Shan Biswas