500 Internal Server Error, using Next.js Causing Refresh Infinite Loop

f55ca2db02a6c1cd1683 · May 20, 2022, 12:58pm

We are encountering a http status 500 issue for all of our sites and we can’t make out why this is happening. Running the site locally using next build and next start works fine. Also in development using next dev. We are clueless how to solve this as we don’t have access to any serverlogs.

Branch deploy URL:
https://development--midas-capital-dapp.netlify.app/

Preview URL:
https://62877da6e12c4b000ad08a1d--midas-capital-dapp.netlify.app/

https://testnet.midascapital.xyz/ (not loading anything, should actually also work)
https://testnet.midascapital.xyz/en (if no wallet connected works, if wallet connected infinite refresh loop with status code 500)
https://testnet.midascapital.xyz/en/56?sortBy=supply (deeper route, same issue, 500 Loop)
site-name: midas-capital-dapp
site-id: 4e389938-790e-4adb-bfc9-0e3d47dafd64

netlify.toml:

[[plugins]]
  package = "@netlify/plugin-nextjs"

[build]
  base    = "./"
  publish = "./packages/ui/.next"
  command = "yarn build:deploy:ui"

[build.environment]
  YARN_CHECKSUM_BEHAVIOR = "update"

[context.branch-deploy.environment]
  NEXT_PUBLIC_SHOW_TESTNETS = "true"

netlify build output:

~/git/monorepo development*
❯ netlify build

────────────────────────────────────────────────────────────────
  Netlify Build
────────────────────────────────────────────────────────────────

❯ Version
  @netlify/build 27.1.1

❯ Flags
  dry: false
  offline: false

❯ Current directory
  /Users/peet/git/monorepo

❯ Config file
  /Users/peet/git/monorepo/netlify.toml

❯ Context
  production

❯ Loading plugins
   - @netlify/plugin-nextjs@4.7.0 from netlify.toml and package.json

────────────────────────────────────────────────────────────────
  1. @netlify/plugin-nextjs (onPreBuild event)
────────────────────────────────────────────────────────────────

Next.js cache restored.
Netlify configuration property "build.environment.NEXT_PRIVATE_TARGET" value changed.

(@netlify/plugin-nextjs onPreBuild completed in 1.6s)

────────────────────────────────────────────────────────────────
  2. build.command from netlify.toml
────────────────────────────────────────────────────────────────

$ yarn build:deploy:ui
Successfully generated 669 typings!
info  - Loaded env from /Users/peet/git/monorepo/packages/ui/.env
info  - Checking validity of types
warn  - using beta Middleware (not covered by semver) - https://nextjs.org/docs/messages/beta-middleware
warn  - Failed to download the stylesheet for https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap. Skipped optimizing this font.
info  - Creating an optimized production build
info  - Compiled successfully
info  - Collecting page data
[    ] info  - Generating static pages (0/10)react-i18next:: You will need to pass in an i18next instance by using initReactI18next
react-i18next:: You will need to pass in an i18next instance by using initReactI18next
react-i18next:: You will need to pass in an i18next instance by using initReactI18next
info  - Generating static pages (10/10)
info  - Finalizing page optimization

Page                                       Size     First Load JS
┌ ● /                                      335 B          1.07 MB
├   /_app                                  0 B            1.07 MB
├ ƒ /_middleware                           0 B            1.07 MB
├ ● /[chainId]                             20 kB          1.12 MB
├ ● /[chainId]/create-pool                 419 B           1.1 MB
├ ● /[chainId]/pool/[poolId]               18.8 kB        1.12 MB
├ ● /[chainId]/pool/[poolId]/edit          49.6 kB        1.16 MB
├   └ css/b44e452a9b15cc82.css             2.95 kB
├ ○ /404                                   196 B          1.07 MB
├ λ /api/getGasPrice                       0 B            1.07 MB
├ λ /api/rss                               0 B            1.07 MB
├ λ /api/tokenData                         0 B            1.07 MB
└ ● /status                                367 B          1.07 MB
+ First Load JS shared by all              1.07 MB
  ├ chunks/framework-fc1f2e8247ad02c2.js   42.1 kB
  ├ chunks/main-0977077116a1a37f.js        29.6 kB
  ├ chunks/pages/_app-6955b64d93053a19.js  995 kB
  ├ chunks/webpack-57502f11fd2da07c.js     1.9 kB
  └ css/3bb1ec73bb8e6d35.css               1.01 kB

ƒ  (Middleware)  intercepts requests (uses _middleware)
λ  (Server)      server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)      automatically rendered as static HTML (uses no initial props)
●  (SSG)         automatically generated as static HTML + JSON (uses getStaticProps)


(build.command completed in 56.3s)

────────────────────────────────────────────────────────────────
  3. @netlify/plugin-nextjs (onBuild event)
────────────────────────────────────────────────────────────────

Patching /Users/peet/git/monorepo/node_modules/next/dist/server/base-server.js
Done
Patching /Users/peet/git/monorepo/node_modules/next/dist/server/next-server.js
Done
Moving static page files to serve from CDN...
Moved 0 files
Skipped moving 8 files because they match middleware, so cannot be deployed to the CDN and will be served from the origin instead.
This is fine, but we're letting you know because it may not be what you expect.
The following middleware matched statically-rendered pages:

- /true/_middleware

────────────────────────────────────────────────────────────────

The following files matched middleware and were not moved to the CDN:

- default.html
- default.json
- en.html
- en.json
- default/status.html
- default/status.json
- en/status.html
- en/status.json

────────────────────────────────────────────────────────────────

There are 4 statically-generated or ISR routes that match a middleware function. Matched routes will always be served from the SSR function and will not use ISR or be served from the CDN.
If this was not intended, ensure that your middleware only matches routes that you intend to use SSR.
Netlify configuration property "redirects" value changed to [
  { from: '/_next/static/*', to: '/static/:splat', status: 200 },
  {
    from: '/:locale/_next/static/*',
    to: '/static/:splat',
    status: 200
  },
  {
    from: '/_next/image*',
    query: { url: ':url', w: ':width', q: ':quality' },
    to: '/_ipx/w_:width,q_:quality/:url',
    status: 301
  },
  { from: '/_ipx/*', to: '/.netlify/builders/_ipx', status: 200 },
  { from: '/cache/*', to: '/404.html', status: 404, force: true },
  { from: '/server/*', to: '/404.html', status: 404, force: true },
  { from: '/serverless/*', to: '/404.html', status: 404, force: true },
  { from: '/trace', to: '/404.html', status: 404, force: true },
  { from: '/traces', to: '/404.html', status: 404, force: true },
  {
    from: '/routes-manifest.json',
    to: '/404.html',
    status: 404,
    force: true
  },
  {
    from: '/build-manifest.json',
    to: '/404.html',
    status: 404,
    force: true
  },
  {
    from: '/prerender-manifest.json',
    to: '/404.html',
    status: 404,
    force: true
  },
  {
    from: '/react-loadable-manifest.json',
    to: '/404.html',
    status: 404,
    force: true
  },
  { from: '/BUILD_ID', to: '/404.html', status: 404, force: true },
  {
    from: '/api',
    to: '/.netlify/functions/___netlify-handler',
    status: 200
  },
  {
    from: '/api/*',
    to: '/.netlify/functions/___netlify-handler',
    status: 200
  },
  {
    from: '/index.html',
    to: '/index.html',
    conditions: { Cookie: [Array] },
    status: 200
  },
  {
    from: '/manifest.json',
    to: '/manifest.json',
    conditions: { Cookie: [Array] },
    status: 200
  },
  {
    from: '/favicon/android-chrome-192x192.png',
    to: '/favicon/android-chrome-192x192.png',
    conditions: { Cookie: [Array] },
    status: 200
  },
  {
    from: '/favicon/android-chrome-512x512.png',
    to: '/favicon/android-chrome-512x512.png',
    conditions: { Cookie: [Array] },
    status: 200
  },
  {
    from: '/favicon/apple-touch-icon.png',
    to: '/favicon/apple-touch-icon.png',
    conditions: { Cookie: [Array] },
    status: 200
  },
  {
    from: '/favicon/browserconfig.xml',
    to: '/favicon/browserconfig.xml',
    conditions: { Cookie: [Array] },
    status: 200
  },
  {
    from: '/favicon/favicon-16x16.png',
    to: '/favicon/favicon-16x16.png',
    conditions: { Cookie: [Array] },
    status: 200
  },
  {
    from: '/favicon/favicon-32x32.png',
    to: '/favicon/favicon-32x32.png',
    conditions: { Cookie: [Array] },
    status: 200
  },
  {
    from: '/favicon/favicon.ico',
    to: '/favicon/favicon.ico',
    conditions: { Cookie: [Array] },
    status: 200
  },
  {
    from: '/favicon/favicon.png',
    to: '/favicon/favicon.png',
    conditions: { Cookie: [Array] },
    status: 200
  },
  {
    from: '/favicon/favicon.svg',
    to: '/favicon/favicon.svg',
    conditions: { Cookie: [Array] },
    status: 200
  },
  {
    from: '/favicon/mstile-150x150.png',
    to: '/favicon/mstile-150x150.png',
    conditions: { Cookie: [Array] },
    status: 200
  },
  {
    from: '/favicon/safari-pinned-tab.svg',
    to: '/favicon/safari-pinned-tab.svg',
    conditions: { Cookie: [Array] },
    status: 200
  },
  {
    from: '/favicon/site.webmanifest',
    to: '/favicon/site.webmanifest',
    conditions: { Cookie: [Array] },
    status: 200
  },
  {
    from: '/images/MetaMask.svg',
    to: '/images/MetaMask.svg',
    conditions: { Cookie: [Array] },
    status: 200
  },
  {
    from: '/images/Midas_Icon_Bright-Theme.svg',
    to: '/images/Midas_Icon_Bright-Theme.svg',
    conditions: { Cookie: [Array] },
    status: 200
  },
  {
    from: '/images/Midas_Icon_Dark-Theme.svg',
    to: '/images/Midas_Icon_Dark-Theme.svg',
    conditions: { Cookie: [Array] },
    status: 200
  },
  {
    from: '/images/WalletConnect.svg',
    to: '/images/WalletConnect.svg',
    conditions: { Cookie: [Array] },
    status: 200
  },
  {
    from: '/images/avax.svg',
    to: '/images/avax.svg',
    conditions: { Cookie: [Array] },
    status: 200
  },
  {
    from: '/images/evmos.png',
    to: '/images/evmos.png',
    conditions: { Cookie: [Array] },
    status: 200
  },
  {
    from: '/images/hardhat.svg',
    to: '/images/hardhat.svg',
    conditions: { Cookie: [Array] },
    status: 200
  },
  {
    from: '/images/help-circle-dark.svg',
    to: '/images/help-circle-dark.svg',
    conditions: { Cookie: [Array] },
    status: 200
  },
  {
    from: '/images/help-circle-light.svg',
    to: '/images/help-circle-light.svg',
    conditions: { Cookie: [Array] },
    status: 200
  },
  {
    from: '/images/small-white-circle.png',
    to: '/images/small-white-circle.png',
    conditions: { Cookie: [Array] },
    status: 200
  },
  {
    from: '/locales/default/common.json',
    to: '/locales/default/common.json',
    conditions: { Cookie: [Array] },
    status: 200
  },
  {
    from: '/locales/en/common.json',
    to: '/locales/en/common.json',
    conditions: { Cookie: [Array] },
    status: 200
  },
  {
    from: '/*',
    to: '/.netlify/functions/___netlify-handler',
    status: 200,
    conditions: { Cookie: [Array] },
    force: true
  },
  {
    from: '/',
    to: '/.netlify/functions/___netlify-handler',
    status: 200
  },
  {
    from: '//*',
    to: '/.netlify/functions/___netlify-handler',
    status: 200
  },
  {
    from: '/default/',
    to: '/.netlify/functions/___netlify-handler',
    status: 200
  },
  {
    from: '/default//*',
    to: '/.netlify/functions/___netlify-handler',
    status: 200
  },
  {
    from: '/_next/data/ihuJDaUtoqmsJ-XcnfJBh/default//*',
    to: '/.netlify/functions/___netlify-handler',
    status: 200
  },
  {
    from: '/en/',
    to: '/.netlify/functions/___netlify-handler',
    status: 200
  },
  {
    from: '/en//*',
    to: '/.netlify/functions/___netlify-handler',
    status: 200
  },
  {
    from: '/_next/data/ihuJDaUtoqmsJ-XcnfJBh/en//*',
    to: '/.netlify/functions/___netlify-handler',
    status: 200
  },
  {
    from: '/_next/data/ihuJDaUtoqmsJ-XcnfJBh/default/index.json',
    to: '/.netlify/functions/___netlify-handler',
    status: 200,
    force: false
  },
  {
    from: '/',
    to: '/.netlify/functions/___netlify-handler',
    status: 200,
    force: false
  },
  {
    from: '/_next/data/ihuJDaUtoqmsJ-XcnfJBh/en/index.json',
    to: '/.netlify/functions/___netlify-handler',
    status: 200,
    force: false
  },
  {
    from: '/en/',
    to: '/.netlify/functions/___netlify-handler',
    status: 200,
    force: false
  },
  {
    from: '/_next/data/ihuJDaUtoqmsJ-XcnfJBh/default/status.json',
    to: '/.netlify/functions/___netlify-handler',
    status: 200,
    force: false
  },
  {
    from: '/status',
    to: '/.netlify/functions/___netlify-handler',
    status: 200,
    force: false
  },
  {
    from: '/_next/data/ihuJDaUtoqmsJ-XcnfJBh/en/status.json',
    to: '/.netlify/functions/___netlify-handler',
    status: 200,
    force: false
  },
  {
    from: '/en/status',
    to: '/.netlify/functions/___netlify-handler',
    status: 200,
    force: false
  },
  {
    from: '/*',
    to: '/.netlify/functions/___netlify-handler',
    status: 200
  }
].

(@netlify/plugin-nextjs onBuild completed in 672ms)

────────────────────────────────────────────────────────────────
  4. Functions bundling
────────────────────────────────────────────────────────────────

Packaging Functions from .netlify/functions-internal directory:
 - ___netlify-handler/___netlify-handler.js
 - ___netlify-odb-handler/___netlify-odb-handler.js
 - _ipx/_ipx.js


(Functions bundling completed in 13s)

────────────────────────────────────────────────────────────────
  5. @netlify/plugin-nextjs (onPostBuild event)
────────────────────────────────────────────────────────────────

Next.js cache saved.

(@netlify/plugin-nextjs onPostBuild completed in 873ms)

────────────────────────────────────────────────────────────────
  Netlify Build Complete
────────────────────────────────────────────────────────────────

(Netlify Build completed in 1m 13.4s)

DNS Record

hrishikesh · May 22, 2022, 1:24pm

Both of the links currently don’t show any webpage, probably because you’ve a wrong publish folder. You somehow seem to be using CRA as this file is typically found in that:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Easily access the Rari Protocol through the Portal’s simple interface."
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>Midas Portal</title>
  </head>

  <body>
    <noscript> aHR0cHM6Ly9wYXN0ZWJpbi5jb20vcmF3L1oxN3hocXFE </noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>

  <!--
  This font is only used for displaying APY and a header about the fund.
  We only load the alphabet, the numbers, and the % symbol.
  -->
  <link
    href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@700&display=fallback&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuv1234567890%"
    rel="stylesheet"
  />
</html>

Side note: if you’re using Netlify DNS as per your screenshot, you shouldn’t have to configure the DNS like you’re doing.

f55ca2db02a6c1cd1683 · May 23, 2022, 7:34am

Was able to fix a few issue we had.

We don’t want to use the apex domain for our netlify deployment. If we use a subdomain app, we get branchname.app.midascapital.xyz. Which is fine but we would rather use testnet.midascapital.xyz so I guess this DNS entry is necessary?

Furthmore a weird behaviour is that the index page of our nextjs app is not openend. So on local and on vercel it worked just fine. Here on netlify we have to go to /97 for example. Any idea why this could be?

https://development--midas-capital-dapp.netlify.app/97

On the / page it’s just not loading anything from our app. So weird and getting these errors on the console.

hrishikesh · May 25, 2022, 1:14pm

As I said, if you’re using Netlify DNS, adding no record is required. It’s done automatically.

About the other issue, it seems you’ve resolved it as I can now load your page.