Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[🐛 Bug]: Pages that could be static is being forced to run in the edge #751

Open
1 task done
Chenalejandro opened this issue Apr 20, 2024 · 0 comments
Open
1 task done
Labels
bug Something isn't working

Comments

@Chenalejandro
Copy link

Chenalejandro commented Apr 20, 2024

next-on-pages environment related information

myproject@0.1.0 deploy
npm run pages:build && wrangler pages deploy

myproject@0.1.0 pages:build
npx @cloudflare/next-on-pages

⚡️ @cloudflare/next-on-pages CLI v.1.11.0
⚡️ Detected Package Manager: npm (10.5.0)
⚡️ Preparing project...
⚡️ Project is ready
⚡️ Building project...
▲ Vercel CLI 34.1.1
▲ WARNING: You should not upload the .next directory.
▲ Installing dependencies...
▲ up to date in 746ms
▲ 164 packages are looking for funding
▲ run npm fund for details
▲ Detected Next.js version: 14.2.2
▲ Detected package-lock.json generated by npm 7+
▲ Running "npm run build"
▲ > myproject@0.1.0 build
▲ > next build
▲ ▲ Next.js 14.2.2
▲ - Environments: .env
▲ Creating an optimized production build ...
▲ ✓ Compiled successfully
▲ Linting and checking validity of types ...
▲ Collecting page data ...
▲ ⚠ Using edge runtime on a page currently disables static generation for that page
▲ Generating static pages (0/4) ...
▲ Generating static pages (1/4)
▲ Generating static pages (2/4)
▲ TypeError: Cannot read properties of undefined (reading 'prepare')
▲ at tO.prepareQuery (/home/alejandro/myproject/.next/server/app/page.js:13:17804)
▲ at tO.prepareOneTimeQuery (/home/alejandro/myproject/.next/server/app/page.js:13:16716)
▲ at tn._prepare (/home/alejandro/myproject/.next/server/app/page.js:13:5354)
▲ at tn.all (/home/alejandro/myproject/.next/server/app/page.js:13:5539)
▲ at tn.execute (/home/alejandro/myproject/.next/server/app/page.js:13:5651)
▲ at tn.then (/home/alejandro/myproject/.next/server/app/page.js:13:661) {
▲ digest: '704320559'
▲ }
▲ TypeError: Cannot read properties of undefined (reading 'prepare')
▲ at tO.prepareQuery (/home/alejandro/myproject/.next/server/app/page.js:13:17804)
▲ at tO.prepareOneTimeQuery (/home/alejandro/myproject/.next/server/app/page.js:13:16716)
▲ at tn._prepare (/home/alejandro/myproject/.next/server/app/page.js:13:5354)
▲ at tn.all (/home/alejandro/myproject/.next/server/app/page.js:13:5539)
▲ at tn.execute (/home/alejandro/myproject/.next/server/app/page.js:13:5651)
▲ at tn.then (/home/alejandro/myproject/.next/server/app/page.js:13:661)
▲ at runNextTicks (node:internal/process/task_queues:60:5)
▲ at listOnTimeout (node:internal/timers:540:9)
▲ at process.processTimers (node:internal/timers:514:7) {
▲ digest: '2579839777'
▲ }
▲ TypeError: Cannot read properties of undefined (reading 'prepare')
▲ at tO.prepareQuery (/home/alejandro/myproject/.next/server/app/page.js:13:17804)
▲ at tO.prepareOneTimeQuery (/home/alejandro/myproject/.next/server/app/page.js:13:16716)
▲ at tn._prepare (/home/alejandro/myproject/.next/server/app/page.js:13:5354)
▲ at tn.all (/home/alejandro/myproject/.next/server/app/page.js:13:5539)
▲ at tn.execute (/home/alejandro/myproject/.next/server/app/page.js:13:5651)
▲ at tn.then (/home/alejandro/myproject/.next/server/app/page.js:13:661)
▲ at runNextTicks (node:internal/process/task_queues:60:5)
▲ at listOnTimeout (node:internal/timers:540:9)
▲ at process.processTimers (node:internal/timers:514:7) {
▲ digest: '2579839777'
▲ }
▲ Generating static pages (3/4)
▲ Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error

▲ TypeError: Cannot read properties of undefined (reading 'prepare')
▲ at tO.prepareQuery (/home/alejandro/myproject/.next/server/app/page.js:13:17804)
▲ at tO.prepareOneTimeQuery (/home/alejandro/myproject/.next/server/app/page.js:13:16716)
▲ at tn._prepare (/home/alejandro/myproject/.next/server/app/page.js:13:5354)
▲ at tn.all (/home/alejandro/myproject/.next/server/app/page.js:13:5539)
▲ at tn.execute (/home/alejandro/myproject/.next/server/app/page.js:13:5651)
▲ at tn.then (/home/alejandro/myproject/.next/server/app/page.js:13:661)
▲ ✓ Generating static pages (4/4)

▲ > Export encountered errors on following paths:
▲ /page: /
▲ Error: Command "npm run build" exited with 1

⚡️ The Vercel build (npx vercel build) command failed. For more details see the Vercel logs above.
⚡️ If you need help solving the issue, refer to the Vercel or Next.js documentation or their repositories.

Description

I have a root page that gets a collection and show a list of links.

By default, Next.js and Vercel will make this page static (Vercel uses ISR), which is desirable since I don't want this page making a request to the db every time.

import Link from "next/link";
import { getAllProblems } from "@/server/data/problem-dto";
import { type Problem } from "@/server/db/schema";


export default async function HomePage() {
  const problems = await getAllProblems();
  return (
    <main className="p-10">
      <h1>Problems</h1>
      <ProblemList problems={problems} />
    </main>
  );
}

function ProblemList(props: { problems: Problem[] }) {
  const { problems } = props;
  if (problems.length === 0) {
    return <p>We cannot find any problems.</p>;
  }
  return <ul>{problems.map(createListItem)}</ul>;
}

function createListItem(problem: Problem) {
  return (
    <li key={problem.id}>
      <Link href={`/problems/${problem.id}`}>
        {problem.title}
      </Link>
    </li>
  );
}

But in cloudflare I'm forced to making it run in edge (export const runtime = "edge";) since the build will fail.
The response time I get:

  • 50~70 ms when static
  • 300+ ms when running in edge

Even if I explicitly make the page static the build still fails:

import { notFound } from "next/navigation";
import { getProblem } from "@/server/data/problem-dto";

// forcing the page to be static
export const dynamic = "force-static";

export default async function ProblemPage({
  params,
}: {
  params: { id: string };
}) {
  const problemId = parseInt(params.id);
  if (isNaN(problemId)) {
    notFound();
  }
  const problem = await getProblem(problemId);
  if (!problem) {
    notFound();
  }
  return <div>problem: {problem.title}</div>;
}

Reproduction

https://gitlab.com/ChenAlejandro/pages-that-should-be-static-is-forced-to-run-in-edge

Pages Deployment Method

Pages CI (GitHub/GitLab integration)

Pages Deployment ID

No response

Additional Information

I also tried next 14.2.1, getting me the same result (as 14.2.2)

Would you like to help?

  • Would you like to help fixing this bug?
@Chenalejandro Chenalejandro added the bug Something isn't working label Apr 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant