I am new to NextJS and it would be a great help if someone can help me out here.
I have got an NextJS application which is working perfectly with some old version of node(12.15) but it is failing after the package.json is getting updated with some newer versions of packages along with the node 18.15.
This is the comparisons of old and new package.json files: package updates
so after npm install -> npm run build -> npm start with new package.json, I am getting the following error:
TypeError: store.getState is not a function
at E:\Work\<app_name>\node_modules\react-redux\lib\components\Provider.js:32:57
at Object.Kc [as useMemo] (E:\Work\<app_name>\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:60:240)
at exports.useMemo (E:\Work\<app_name>\node_modules\react\cjs\react.production.min.js:25:208)
at Provider (E:\Work\<app_name>\node_modules\react-redux\lib\components\Provider.js:32:44)
at Wc (E:\Work\<app_name>\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:68:44)
at Zc (E:\Work\<app_name>\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:253)
at Z (E:\Work\<app_name>\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89)
at Xc (E:\Work\<app_name>\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:68:409)
at Zc (E:\Work\<app_name>\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:210)
at Z (E:\Work\<app_name>\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89)
From the error it seems like the issue is with the redux-store setup but still I am not sure about it. Following are the _app.js and store.js I have implemented:
_app.js:
require("events").EventEmitter.defaultMaxListeners = 10000;
// libraries
import { Provider } from "react-redux";
import Router from "next/router";
import App from "next/app";
import Head from "next/head";
import withRedux from "next-redux-wrapper";
import axios from "axios";
//import instance from "../utils/axios"
import "focus-visible";
// utilities
import apiUrl from "../utils/apiUrl";
// redux
import store from "../store";
import { setSchool, setSchoolLogo, setSiteIndex } from "../store/aisles/global";
import { setPrograms } from "../store/aisles/program";
// need to import stylesheet here to enable it everywhere
import "../public/css/bootstrap-grid.min.css";
import "../public/css/output.css";
export default withRedux(store, { debug: false })(
class CustomApp extends App {
static async getInitialProps({ Component, ctx }) {
try {
/* FETCH DATA FOR ALL PAGES */
// When pushing make sure index is set to 1
if (ctx?.req) {
//Does not need to be changed
ctx.store?.dispatch(setSiteIndex(0));
let subdomain = "myapp";
if (ctx.req.headers.host != undefined) {
subdomain = ctx.req.headers.host.split(".").shift();
}
if (subdomain === "www") {
subdomain = "myapp";
}
/*
OLD IF STATEMENT CODE: SHOULDN'T BE NEEDED AS AHI IS A SCHOOL IN ITSELF.
HOLD TEMPORARILY UNTIL SCHOOL ROUTES ARE VETTED OUT...
*/
if (
subdomain === `localhost:3000` ||
subdomain === `127` ||
subdomain === `myapptravelltd` ||
subdomain === `myapp-server` ||
subdomain === `myapp-server-staging` ||
subdomain === `herokuapp` ||
subdomain === `myapptravel` ||
subdomain === `myapptravellimited` ||
subdomain === `myapptraveltest` ||
subdomain === `myapptravel-staging`
) {
subdomain = "myapp";
}
try {
/* METHOD FOR SCHOOLS */
var format = /[ `!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/;
let school;
if (
subdomain != null &&
subdomain != undefined &&
!format.test(subdomain)
) {
school = await axios
.get(apiUrl("school/" + subdomain))
.catch((err) => {
console.log(err);
});
}
if (
school != undefined &&
school.data.school != null &&
school.data.school != undefined
) {
ctx?.store?.dispatch(
setSchool(
Object.assign({}, school.data.school, {
logo: school.data.logo,
})
)
);
let error;
ctx?.store?.dispatch(
setSchoolLogo(
`https://schoollogo.s3.amazonaws.com/Logo_REC_${school.data.school.nameShort}.jpg`
)
);
await axios
.get(
`https://schoollogo.s3.amazonaws.com/Logo_REC_${school.data.school.nameShort}.jpg`
)
.catch((err) => {
if (err != undefined) {
if (
err != undefined &&
err.response != undefined &&
err.response.status === 404
) {
ctx?.store?.dispatch(
setSchoolLogo(
`https://schoollogo.s3.amazonaws.com/Logo_SQUARE_${school.data.school.nameShort}.jpg`
)
);
}
}
});
let programs = await axios
.get(apiUrl(`featured/${subdomain}`))
.catch((err) => {
console.log(err);
});
if (programs != null && programs != undefined) {
ctx?.store?.dispatch(setPrograms(programs.data));
programs = programs.data;
}
let activePrograms = await axios
.get(apiUrl(`active/${subdomain}`))
.then((activePrograms) => {
activePrograms = activePrograms.data;
activePrograms = activePrograms.slice(0, 6);
if (activePrograms != null && activePrograms != undefined) {
ctx?.store?.dispatch(setPrograms(activePrograms));
}
})
.catch((err) => {
console.log(err);
});
}
} catch (err) {
if (err != undefined) {
if (err.response != undefined) {
if (err.response.status === 404) {
console.log("404");
} else {
console.log(err);
}
}
}
}
} else {
console.log("getInitialProps failed...");
}
let pageProps = Component.getInitialProps
? await Component.getInitialProps(ctx)
: {};
return { pageProps };
} catch (err) {
console.log("error occurred during getInitialProps ======>> ", err);
}
}
componentDidMount() {
console.log("....Mounted....");
Router.events.on("routeChangeComplete", () => {
window.scroll({
top: 0,
left: 0,
behavior: "smooth",
});
});
}
componentWillUnmount() {
Router.events.off("routeChangeComplete", () => {
console.log("unsubscribed");
});
}
render() {
let { Component, pageProps } = this.props;
return (
<Provider store={store}>
<Head>
<link rel="stylesheet" href="https://use.typekit.net/mdd1zly.css" />
{/* <link rel='shortcut icon' href=''></link> */}
{/* <script
type='text/javascript'
src='https://www.bugherd.com/sidebarv2.js?apikey=hhzw6gkjebdxbrwgpnlvxq'
async={true}
></script> */}
</Head>
<Component {...pageProps} />
</Provider>
);
}
}
);
store.js:
import { combineReducers, createStore, applyMiddleware } from "redux";
import thunkMiddleware from "redux-thunk";
import { composeWithDevTools } from "redux-devtools-extension";
const store = (initial = {}) =>
createStore(
combineReducers({
admin: require("./aisles/admin").default,
cms: require("./aisles/cms").default,
global: require("./aisles/global").default,
program: require("./aisles/program").default,
// school: require('./aisles/school').default
}),
initial,
composeWithDevTools(
applyMiddleware(thunkMiddleware)
)
);
export default store;
I also tried to print the ctx object in the _app.js getInitialProps(), but the ctx object do not contain any property like store. Does it means that I am implementing something which is breaking the current app? Any help here will be appreciated. Thanks.
NOTE: With the above mentioned code the app is running perfectly with the node 12.15 version. The issue occurs with the node 18.15 version.
