I am encountering an issue while deploying my Next.js 13 app. The error message states:
Module not found: Can't resolve 'encoding' in '/vercel/path0/node_modules/node-fetch/lib'Additionally, I am facing a "Next Router not mounted" error.
Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted
at useRouter (/vercel/path0/.next/server/chunks/5225.js:12428:15)
at useHybridHydrate (/vercel/path0/.next/server/chunks/5225.js:6566:45)
at Object.useWrappedStore (/vercel/path0/.next/server/chunks/5225.js:6614:9)
at AuthProvider (/vercel/path0/.next/server/chunks/9622.js:219:31)
at Je (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:121:272)
at Je (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:127:11)
at Z (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:128:91)
at Ke (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:131:155)
at Je (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:122:215)
at Z (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:128:91)
To address the first error, I tried running npm add -D encoding based on a suggestion from another StackOverflow thread but it did not resolve the issue. As for the second error, I am using next/navigation instead of the outdated next/router, yet the problem persists. Any assistance would be appreciated.
[EDIT]
Upon debugging my application, I discovered that the error is originating from the usage of nextWrapper in conjunction with Redux. I incorporated this due to having multiple slices in my app.
store.js
import { combineReducers, configureStore } from "@reduxjs/toolkit";
import { createWrapper, HYDRATE } from "next-redux-wrapper";
import menuReducer from "./slices/menuSlice";
import vehicleReducer from "./slices/vehicleSlice";
import blogReducer from "./slices/blogSlice";
const combinedReducer = combineReducers({
menu: menuReducer,
vehicle: vehicleReducer,
blog: blogReducer,
});
const reducer = (state, action) => {
if (action.type === HYDRATE) {
const nextState = {
...state,
...action.payload,
};
return nextState;
} else {
return combinedReducer(state, action);
}
};
const store = configureStore({
reducer: reducer,
});
const makeStore = () => store;
export const wrapper = createWrapper(makeStore);
and in layout.js
import "../styles/globals.css";
import { AuthProvider } from "./AuthProvider";
function RootLayout({ children }) {
//new change
return (
<html>
<head />
<body className="max-w-7xl mx-auto">
<AuthProvider>{children}</AuthProvider>
</body>
</html>
);
}
export default RootLayout;
authProvider.js
"use client";
import React from "react";
import { SessionProvider } from "next-auth/react";
import { ChakraProvider } from "@chakra-ui/react";
import { SkeletonTheme } from "react-loading-skeleton";
import { wrapper } from "../store";
import { Provider } from "react-redux";
import NextTopLoader from "nextjs-toploader";
export function AuthProvider({ children, ...rest }) {
const { store } = wrapper.useWrappedStore(rest);
return (
<SessionProvider>
<Provider store={store}>
<ChakraProvider>
<NextTopLoader color="#008080" showSpinner={false} />
{children}
</ChakraProvider>
</Provider>
</SessionProvider>
);
}
During deployment, I encountered an error when using the Redux provider within layout.js, leading me to move it to authProvider.