Next.js中使用Redux出现Server Error: middleware is not a function求助

错误原因 #

你遇到的问题核心是redux-thunk的导入方式不对。从redux-thunk v3.x版本开始，它不再提供默认导出，而是改用命名导出。你当前代码里用import thunk from 'redux-thunk'这种默认导入方式，拿到的其实是一个包含thunk属性的对象，不是真正的中间件函数，传给applyMiddleware后自然会触发“middleware is not a function”错误。

修复方法 #

方法一：修改导入语句（推荐） #

把原来的默认导入改成命名导入，直接获取中间件函数：

// 替换这一行
import thunk from 'redux-thunk'
// 改为
import { thunk } from 'redux-thunk'

方法二：降级redux-thunk版本（不推荐） #

如果因为项目兼容问题必须用默认导入，可以降级到v2.x版本：

npm install redux-thunk@2.4.2

不过这种方式会错过新版本的特性和bug修复，优先推荐第一种方法。

修复后的完整代码 #

import { createStore, combineReducers, applyMiddleware } from 'redux'
import { thunk } from 'redux-thunk'
import { composeWithDevTools } from '@redux-devtools/extension'

const reducer = combineReducers({})

const initialState = {}

const middleware = [thunk]

const store = createStore(
    reducer,
    initialState,
    composeWithDevTools(applyMiddleware(...middleware))
)

export default store

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