#Next js dynamic route infinitely loading when built and started on a Ubuntu server with Nginx.

10 messages · Page 1 of 1 (latest)

scarlet tundra
#

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.

image.png image.png
dim fjordBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

scarlet tundra
#

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.
#

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,
},
};
};

solar plover
#

Have you tried running a ubuntu VM locally and seeing if it works?

scarlet tundra
solar plover
#

So, the dynamic route doesnt load, but all other pages load?

scarlet tundra
solar plover
#

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?

scarlet tundra