Next js dynamic route infinitely loading when built and started on a Ubuntu server with Nginx.
Unanswered
Tramp ant posted this in #help-forum
Tramp antOP
On what development environments have we tested (both npm run build, npm run dev and npm run start work fine here)?
- Windows 10 Pro
- Ubuntu 20.4
- Node versions we have tried - 19.9.0, 20.4.0 (doesn't seem to make a difference).
Package.json packages:
"dependencies": {
"@fortawesome/fontawesome-free": "^6.2.1",
"@reduxjs/toolkit": "^1.8.2",
"@types/nodemailer": "^6.4.8",
"alchemy-sdk": "^2.2.3",
"autoprefix": "^1.0.1",
"crypto-js": "^4.1.1",
"ethers": "^6.7.1",
"formidable": "^3.5.0",
"next": "^13.4.19",
"next-auth": "^4.23.1",
"next-themes": "^0.2.0",
"nodemailer": "^6.9.3",
"nprogress": "^0.2.0",
"react": "^18.2.0",
"react-confetti": "^6.1.0",
"react-copy-to-clipboard": "^5.1.0",
"react-countdown": "^2.3.5",
"react-dom": "^18.2.0",
"react-hot-toast": "^2.4.0",
"react-redux": "^8.0.2",
"react-tabs": "^6.0.2",
"react-use": "^17.4.0",
"serverless-mysql": "^1.5.4",
"sharp": "^0.30.7",
"socket.io": "^4.6.2",
"socket.io-client": "^4.6.2",
"sweetalert2": "^11.6.13",
"swiper": "^10.1.0",
"swr": "^2.0.3",
"viem": "^1.1.4",
"wagmi": "^1.3.10"
},
"devDependencies": {
"@types/react": "^18.0.21",
"@types/react-copy-to-clipboard": "^5.0.4",
"@types/react-dom": "^18.0.6",
"@typescript-eslint/eslint-plugin": "^5.40.1",
"@typescript-eslint/parser": "^5.40.1",
"husky": "^8.0.3",
"postcss": "^8.4.14",
"prettier": "^3.0.2",
"tailwindcss": "^3.3.3",
"typescript": "^5.1.6"
},
"overrides": {
"autoprefixer": "10.4.5"
}
}
Server version:
- Ubuntu 20.4
- nginx 1.18.0
- pm2 (for running the next js app)
The error is:
Error: Failed to load script: /_next/static/chunks/pages/break/%5Bid%5D-241e4124e2bca815.js
onerror NextJS
<our-domain>.com:2367:25
overrideMethod https://<our-domain>.com/:2367
NextJS 19
The page where the bug occurs is a dynamic route with the name [id].tsx.
- Windows 10 Pro
- Ubuntu 20.4
- Node versions we have tried - 19.9.0, 20.4.0 (doesn't seem to make a difference).
Package.json packages:
"dependencies": {
"@fortawesome/fontawesome-free": "^6.2.1",
"@reduxjs/toolkit": "^1.8.2",
"@types/nodemailer": "^6.4.8",
"alchemy-sdk": "^2.2.3",
"autoprefix": "^1.0.1",
"crypto-js": "^4.1.1",
"ethers": "^6.7.1",
"formidable": "^3.5.0",
"next": "^13.4.19",
"next-auth": "^4.23.1",
"next-themes": "^0.2.0",
"nodemailer": "^6.9.3",
"nprogress": "^0.2.0",
"react": "^18.2.0",
"react-confetti": "^6.1.0",
"react-copy-to-clipboard": "^5.1.0",
"react-countdown": "^2.3.5",
"react-dom": "^18.2.0",
"react-hot-toast": "^2.4.0",
"react-redux": "^8.0.2",
"react-tabs": "^6.0.2",
"react-use": "^17.4.0",
"serverless-mysql": "^1.5.4",
"sharp": "^0.30.7",
"socket.io": "^4.6.2",
"socket.io-client": "^4.6.2",
"sweetalert2": "^11.6.13",
"swiper": "^10.1.0",
"swr": "^2.0.3",
"viem": "^1.1.4",
"wagmi": "^1.3.10"
},
"devDependencies": {
"@types/react": "^18.0.21",
"@types/react-copy-to-clipboard": "^5.0.4",
"@types/react-dom": "^18.0.6",
"@typescript-eslint/eslint-plugin": "^5.40.1",
"@typescript-eslint/parser": "^5.40.1",
"husky": "^8.0.3",
"postcss": "^8.4.14",
"prettier": "^3.0.2",
"tailwindcss": "^3.3.3",
"typescript": "^5.1.6"
},
"overrides": {
"autoprefixer": "10.4.5"
}
}
Server version:
- Ubuntu 20.4
- nginx 1.18.0
- pm2 (for running the next js app)
The error is:
Error: Failed to load script: /_next/static/chunks/pages/break/%5Bid%5D-241e4124e2bca815.js
onerror NextJS
<our-domain>.com:2367:25
overrideMethod https://<our-domain>.com/:2367
NextJS 19
The page where the bug occurs is a dynamic route with the name [id].tsx.
9 Replies
Tramp antOP
What have we tried so far?
- Killing all node processes. No memory leakages.
- Including the ".next" folder and static assets separately in the Nginx configuration.
- Running without pm2 (the issue persists).
- Using "<a>" in instead of "<Link>" tag as well as passing "as" props.
- Wiping the entire cache, ".next" and "node_modules" folder.
- Re-cloning the repository.
- We checked and the file at the URL that gives "404" in the pictures is on the server after the build step.
- The issue is not related to the middleware.
- Killing all node processes. No memory leakages.
- Including the ".next" folder and static assets separately in the Nginx configuration.
- Running without pm2 (the issue persists).
- Using "<a>" in instead of "<Link>" tag as well as passing "as" props.
- Wiping the entire cache, ".next" and "node_modules" folder.
- Re-cloning the repository.
- We checked and the file at the URL that gives "404" in the pictures is on the server after the build step.
- The issue is not related to the middleware.
Our getServerSideProps
export const getServerSideProps: GetServerSideProps = async (context) => {
let promotionalItems = null;
let notInItemId = context.query.id
? [BigInt(context.query.id.toString())]
: [];
const session: Session | null = await getServerSession(
context.req,
context.res,
authOptions
);
const seller =
session && session.user.walletAddress ? session.user.walletAddress : "";
try {
promotionalItems = await getPromotionalItems(notInItemId, seller);
} catch (e: any) {
throw Error(e.reason || e.message);
}
return {
props: {
promotionalItems,
},
};
};
export const getServerSideProps: GetServerSideProps = async (context) => {
let promotionalItems = null;
let notInItemId = context.query.id
? [BigInt(context.query.id.toString())]
: [];
const session: Session | null = await getServerSession(
context.req,
context.res,
authOptions
);
const seller =
session && session.user.walletAddress ? session.user.walletAddress : "";
try {
promotionalItems = await getPromotionalItems(notInItemId, seller);
} catch (e: any) {
throw Error(e.reason || e.message);
}
return {
props: {
promotionalItems,
},
};
};
Asiatic Lion
Have you tried running a ubuntu VM locally and seeing if it works?
@Asiatic Lion Have you tried running a ubuntu VM locally and seeing if it works?
Tramp antOP
Will try that, thanks. 🙂
Asiatic Lion
So, the dynamic route doesnt load, but all other pages load?
@Asiatic Lion So, the dynamic route doesnt load, but all other pages load?
Tramp antOP
Yes, just this dynamic route. All others do.
Asiatic Lion
Is there some third-party api request within getserversideprops that might be blocking and timing out causing none of the dynamic routes to be built?
@Asiatic Lion Is there some third-party api request within getserversideprops that might be blocking and timing out causing none of the dynamic routes to be built?
Tramp antOP
"GetPromotionalItems" makes a request to the database, the session is standard for "next auth". If something was up with it data must not have been fetched at all. I will check it once more.
Tramp antOP
@Asiatic Lion, we solved it by making adding ".next" as a location in the Nginx configuration. Thank you for answering. 🙂