Nextjs14使用next-redux-wrapper报错解法

前言

随着Nextjs V14版本的发布，应该越来越多小伙伴开始会使用Nextjs V14进行开发，或者之前使用较旧版本的项目也会存在升级的需求。那么如果你和我一样使用的是Nextjs V13.5之前的版本进行升级，并且你的Nextjs项目使用了next-redux-wrapper，那么恭喜你，很有可能会踩坑了。

什么是next-redux-wrapper？

next-redux-wrapper是一个第三方库，主要作用是在我们使用Nextjs进行项目开发时，依赖Redux进行数据管理，那么服务端和客户端的Store是不同步的。一般情况下，我们是需要自己手动去处理的。而 next-redux-wrapper就是帮我们在服务触发了SSR和SSP时，主动触发一个约定的Action来触发 Reducers实现服务端和客户端的Store同步的。

next-redux-wrappergithub.com/kirill-konshin/next-redux-wrapper

遇到什么坑？

当你开开心心的升级了Nextjs到V14版本，同时使用了next-redux-wrapper，并且成功编译，兴致勃勃的打开localhost:3000准备查看一番的时候，你很有可能会看到如下报错：

ruby 复制代码

 ⨯ Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted
    at useRouter (/Users/lamho/Desktop/tencent/monorepo/frontend/node_modules/next-redux-wrapper/node_modules/next/dist/client/router.js:146:15)
    at useHybridHydrate (/Users/lamho/Desktop/tencent/monorepo/frontend/node_modules/next-redux-wrapper/lib/index.js:250:45)
    at Object.useWrappedStore (/Users/lamho/Desktop/tencent/monorepo/frontend/node_modules/next-redux-wrapper/lib/index.js:298:9)
    at MyApp (webpack-internal:///./pages/_app.tsx:59:80)
    at renderWithHooks (/Users/lamho/Desktop/tencent/monorepo/frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/Users/lamho/Desktop/tencent/monorepo/frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
    at renderElement (/Users/lamho/Desktop/tencent/monorepo/frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/lamho/Desktop/tencent/monorepo/frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/lamho/Desktop/tencent/monorepo/frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderContextProvider (/Users/lamho/Desktop/tencent/monorepo/frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5920:3)
    at renderElement (/Users/lamho/Desktop/tencent/monorepo/frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6017:11)
    at renderNodeDestructiveImpl (/Users/lamho/Desktop/tencent/monorepo/frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/lamho/Desktop/tencent/monorepo/frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (/Users/lamho/Desktop/tencent/monorepo/frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
    at renderElement (/Users/lamho/Desktop/tencent/monorepo/frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7) {
  page: '/'
}

瞬间一脸懵逼有没有！！！

问题是什么？

通过next-redux-wrapper的描述，说明是支持9.5以上的版本的。

难道作者骗我吗？看了一下最后更新版本的记录，最新一个版本已经是接近1年前了。心都凉了。

反手想给作者提个issue说明一下问题，结果发现一个老哥已经遇到的问题#564 ,很遗憾的是，作者也没有理我们，那我只好排查一下看看到底是哪里有问题了。

通过错误信息可以看出，这里意思应该没有找到NextRouter的Provider，next-router-not-mounted，

经过排查代码断点最定定位到了问题所在，首先NextRouter没有挂载错误的原因是next-redux-wrapper使用了next的v12版本作为依赖，在代码中的useHybridHydrate函数中，router对象是通过next/router获得的，当路由发生变化时，routeChangeStart事件一定会触发Hydrate。

通过对比next v12和v14的源代码，发现routerContext的文件路径从shared/lib/router-contextbiu变成了shared/lib/router-context.shared-runtime。导致路由器上下文不能正确获取，最终导致程序异常。

确切地说，这个问题应该从v13.5.0开始就存在了

router.ts(v13.4.19 and earlier)

typescript 复制代码

/* global window */
import React from 'react'
import Router from '../shared/lib/router/router'
import type { NextRouter } from '../shared/lib/router/router'
import { RouterContext } from '../shared/lib/router-context'
import isError from '../lib/is-error'

// ...

router.ts(v14.0.2)

typescript 复制代码

/* global window */
import React from 'react'
import Router from '../shared/lib/router/router'
import type { NextRouter } from '../shared/lib/router/router'
import { RouterContext } from '../shared/lib/router-context.shared-runtime'
import isError from '../lib/is-error'

// ...

以下是几个版本的router函数链接

v13.4.19 and earlier router.ts
v13.5.0 router.ts
v14.0.2 router.ts

如何解决

本来我尝试通过Fork代码进行修改，然后提交给作者，但是我一直无法正常的安装所需依赖，无奈之下我新建了一个仓库，对源代码进行修改，并重新提交一个新的NPM包。

next-redux-wrapper-futuregithub.com/LLLLLamHo/next-redux-wrapper-future#next-redux-wrapper-future

大家可以通过npm install next-redux-wrapper-future或使用yarn进行安装。

我全面升级了包中对react和next的版本依赖，并且通过原本项目中所有的测试用例。目前在我的项目中运行一切正常，并没有发现任何异常，大家可以放心使用。