Next.js集成Redux报错TypeError: (0 , _react.createContext) is not a function

可能原因及解决方案 #

1. React与react-redux版本不兼容 #

createContext是React 16.8+才支持的API，若项目中React版本过低，或react-redux版本与React不匹配，会触发该错误。

• 执行命令查看当前版本：

  npm list react react-redux
  

• 调整版本：
  • 若React版本低于16.8，升级React到兼容版本：

    npm install react@^18.2.0 react-dom@^18.2.0
    

  • 若react-redux版本过高，降级到适配React版本的分支（比如React 16.x对应react-redux v7.x）：

    npm install react-redux@^7.2.9
    

2. SSR环境下未正确创建Redux Store #

Next.js服务器端渲染时，每个请求需要独立的Store实例，全局单例Store会导致服务器端上下文错误。

• 修改store.js，创建生成Store的函数：

  import { configureStore } from '@reduxjs/toolkit';
  import authReducer from './authSlice';
  
  export const makeStore = () => {
    return configureStore({
      reducer: {
        auth: authReducer,
      },
    });
  };
  

• 在Pages Router的_app.js中配置Provider：

  import { Provider } from 'react-redux';
  import { makeStore } from '../store';
  import { useStore } from 'react-redux';
  
  function MyApp({ Component, pageProps }) {
    const store = useStore() || makeStore();
    return (
      <Provider store={store}>
        <Component {...pageProps} />
      </Provider>
    );
  }
  
  export default MyApp;
  

• 若用Next.js 13+ App Router，在layout.js中添加客户端指令并配置Provider：

  'use client';
  import { Provider } from 'react-redux';
  import { makeStore } from './store';
  import { useStore } from 'react-redux';
  
  export default function RootLayout({ children }) {
    const store = useStore() || makeStore();
    return (
      <html lang="en">
        <body>
          <Provider store={store}>{children}</Provider>
        </body>
      </html>
    );
  }
  

3. 服务器组件误用Redux Hooks #

Next.js 13+ App Router默认组件为服务器组件，Redux的useSelector/useDispatch等Hooks仅支持客户端组件，直接调用会触发上下文错误。

• 在使用Redux的组件顶部添加客户端指令：

  'use client';
  import { useSelector, useDispatch } from 'react-redux';
  import { /* 导入你的action */ } from '../store/authSlice';
  
  export default function AuthComponent() {
    const user = useSelector(state => state.auth.user);
    const dispatch = useDispatch();
    // 组件逻辑
    return <div>{user?.name}</div>;
  }
  

4. 清理缓存与依赖 #

除重装依赖，还需清理Next.js构建缓存：

• 删除相关文件：

  # Linux/Mac
  rm -rf node_modules package-lock.json .next
  # Windows
  rd /s /q node_modules package-lock.json .next
  

• 重新安装依赖并启动：

  npm install
  npm run dev
  

内容的提问来源于stack exchange，提问作者Moh3n.As