Cloudflare Developers•2w ago

Internal Server Error, NextJS, Pages

Hi, I come back to you with the same error that randomly reappears with me, once on one computer it works, once on another, and now not at all. To the point, when I upload my project in NextJS to Cloudflare Pages, everything is ok, there is no error, the page is deployed successfully, but when I go to the link the error “Internal Server Error” appears. I have tried the solutions that have already appeared on the forum, but nothing helps. The best thing is that I have not modified the code in any way for the last time and despite this, with the previous uploud everything was ok. After firing in terminal: wrangler pages deployment tail.... it receives this error: GET https://dev.foca.plgbc.org.pl/ - Ok @ 3/24/2025, 5:27:31 PM (error) TypeError: Cannot read properties of undefined (reading 'navigator') Any ideas, anyone had a similar problem? Please help, because I already have a delay in the project because of this and I have no idea how to fix it wrangler version: 3.61.0 (i tested on 3.61.0 and 4.4.0) wrangler.toml: name = "foca-web" compatibility_date = "2024-11-11" compatibility_flags = ["nodejs_compat"] pages_build_output_dir = ".vercel/output/static" package.json: { .......... "dependencies": { .......... "next": "14.2.15", "react": "18", "react-dom": "18", }, "devDependencies": { .......... "@Cloudflare/next-on-pages": "^1.13.10", "vercel": "39.1.1" }, "overrides": { "vercel": "$vercel" } }

13 Replies

ladryk.0OP•2w ago

any idea?

James•2w ago

Sounds like you're using a browser api on the server and it's unavailable

ladryk.0OP•2w ago

this is how my truncated layout.tsx code looks like, when I remove next-intl and “async” from it everything works, the problem is that the whole site is based on this and this is how it has been working for the last months

import "../styles/index.scss";
import { getLocale, getMessages } from "next-intl/server";
import { NextIntlClientProvider } from "next-intl";
// import {
// fetchUserData,
// getPathnameOnServer,
// validateUserSession,
// } from "@/helpers";
// import { AppShell } from "@/components";
// import { GoogleAnalytics, GoogleTagManager } from "@next/third-parties/google";

const RootLayout = async ({ children }: { children: React.ReactNode }) => {
  // await validateUserSession();
  // const userData = await fetchUserData();

  const locale = await getLocale();
  const messages = await getMessages();

  // const pathname = await getPathnameOnServer();
  // const isApp = pathname.startsWith("/app");

  return (
    <html className={"astraq x srt"} lang={locale}>
      <head>
        <link rel={"shortcut icon"} href={"/favicon.ico"} />
        <link rel={"shortcut icon"} href={"/assets/favicon.ico"} />

        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link
          rel="preconnect"
          href="https://fonts.gstatic.com"
          crossOrigin={"use-credentials"}
        />
        <link
          href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap"
          rel="stylesheet"
        />
      </head>

      <body>
        <NextIntlClientProvider messages={messages}>
          {/* <AppShell
            navigationType={isApp ? "app" : "web"}
            footerVariant={isApp ? "small" : "large"}
            userData={{}}
          >
            {children}
          </AppShell> */}

          {children}
        </NextIntlClientProvider>

        {/* <GoogleAnalytics gaId="G-..." />
        <GoogleTagManager gtmId="G-..." /> */}
      </body>
    </html>
  );
};

export default RootLayout;

import "../styles/index.scss";
import { getLocale, getMessages } from "next-intl/server";
import { NextIntlClientProvider } from "next-intl";
// import {
// fetchUserData,
// getPathnameOnServer,
// validateUserSession,
// } from "@/helpers";
// import { AppShell } from "@/components";
// import { GoogleAnalytics, GoogleTagManager } from "@next/third-parties/google";

const RootLayout = async ({ children }: { children: React.ReactNode }) => {
  // await validateUserSession();
  // const userData = await fetchUserData();

  const locale = await getLocale();
  const messages = await getMessages();

  // const pathname = await getPathnameOnServer();
  // const isApp = pathname.startsWith("/app");

  return (
    <html className={"astraq x srt"} lang={locale}>
      <head>
        <link rel={"shortcut icon"} href={"/favicon.ico"} />
        <link rel={"shortcut icon"} href={"/assets/favicon.ico"} />

        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link
          rel="preconnect"
          href="https://fonts.gstatic.com"
          crossOrigin={"use-credentials"}
        />
        <link
          href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap"
          rel="stylesheet"
        />
      </head>

      <body>
        <NextIntlClientProvider messages={messages}>
          {/* <AppShell
            navigationType={isApp ? "app" : "web"}
            footerVariant={isApp ? "small" : "large"}
            userData={{}}
          >
            {children}
          </AppShell> */}

          {children}
        </NextIntlClientProvider>

        {/* <GoogleAnalytics gaId="G-..." />
        <GoogleTagManager gtmId="G-..." /> */}
      </body>
    </html>
  );
};

export default RootLayout;

the rest of the code is already “use client” in the sense, single pages and components

James•2w ago

to me that suggests an issue with the next-intl library

ladryk.0OP•2w ago

well, but this site has been running for a good six months and there was no problem, so why now it does not work. The code hasn't changed drastically, and now when, for example, I go back to the version from a week ago which is currently running on “production” it doesn't work anymore after uploding again. The problem must be with Cloudflare or @Cloudflare/next-on-pages or vercel. Something must have changed there in the last week layout.tsx has not changed at all since the first deployment also from the beginning I use next-intl

James•2w ago

there have been no updates to next-on-pages, vercel cli, or next-i18n in the past week, so i doubt it would be any of those. wrangler had an update in the past week, but you said it happens on old versions as well so i wouldnt be that. Perhaps it's the build container - are you able to check build logs to see what node version/etc is used?

ladryk.0OP•2w ago

And can you tell me where I can find it ?

import "../styles/index.scss";
import { validateUserSession } from "@/helpers";

const RootLayout = async ({ children }: { children: React.ReactNode }) => {
  await validateUserSession();

  return (
    <html className={"astraq x srt"} lang={"pl"}>
      <head>
        <link rel={"shortcut icon"} href={"/favicon.ico"} />
        <link rel={"shortcut icon"} href={"/assets/favicon.ico"} />

        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link
          rel="preconnect"
          href="https://fonts.gstatic.com"
          crossOrigin={"use-credentials"}
        />
        <link
          href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap"
          rel="stylesheet"
        />
      </head>

      <body>{children}</body>
    </html>
  );
};

export default RootLayout;

import "../styles/index.scss";
import { validateUserSession } from "@/helpers";

const RootLayout = async ({ children }: { children: React.ReactNode }) => {
  await validateUserSession();

  return (
    <html className={"astraq x srt"} lang={"pl"}>
      <head>
        <link rel={"shortcut icon"} href={"/favicon.ico"} />
        <link rel={"shortcut icon"} href={"/assets/favicon.ico"} />

        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link
          rel="preconnect"
          href="https://fonts.gstatic.com"
          crossOrigin={"use-credentials"}
        />
        <link
          href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap"
          rel="stylesheet"
        />
      </head>

      <body>{children}</body>
    </html>
  );
};

export default RootLayout;

"use server";

const validateUserSession = async () => {
  console.log("test");
};

export { validateUserSession };

"use server";

const validateUserSession = async () => {
  console.log("test");
};

export { validateUserSession };

when I add “validateUserSession” which contains only console.log then I get this error, and when I remove it it is all ok I have no idea what's going on here anymore but when I replace the import path with “import { validateUserSession } from ‘../helpers/validateUserSession.helper’;” it all works @Cloudflare (Server Owner) @Community Champion @Better James

Isaac McFadyen•2w ago

?pings

SuperHelpflare•2w ago

Please do not ping community members for non-moderation reasons. Doing so will not solve your issue faster and will make people less likely to want to help you.

ladryk.0OP•2w ago

oh sorry I didn't know

James•2w ago

I work a job unrelated to Cloudflare during the day and answer questions relevant to projects I contribute to in the evenings outside of work. Pinging me won't get an answer any quicker. I'm afraid I don't know why your import isn't working.

ladryk.0OP•2w ago

yes I already know that you can't ping, sorry. Now that I've tweaked a bit I have a totally different error that appears during uploud on cloudflare

ladryk.0OP•2w ago

appears when I use “next-on-pages-monorepo”: “github:cloudflare/next-on-pages”, instead of ‘@Cloudflare/next-on-pages’: “^1.13.10”, earlier I used the former but I got some error which I fixed by installing the second library, but now none of the options work anymore

Gaming

Programming

Internal Server Error, NextJS, Pages

Did you find this page helpful?