Search code examples
reactjsnext.jsvercelsupabase

Deploying Next 13 to Vercel error: Error: Export encountered errors on following paths:

I am trying to deploy my Next 13 project to Vercel, and I am encountering two errors on the dynamic route which looks like this:

File Structure: App directory File Structure

Error: Error Message

The code of said page looks like this:

import React from "react";
import Image from "next/image";
import { ArrowLeftIcon } from "@heroicons/react/24/outline";
import { supabase } from "../../../utils/supabase";
import Script from "next/script";
import Link from "next/link";

export const revalidate = 60;

export default async function HostPage({
  params: { username },
}: {
  params: { username: string };
}) {
  const { data: profile } = await supabase
    .from("profiles")
    .select()
    .match({ username })
    .single();
  const [host] = await Promise.all([profile]);

  return (
    <div>
      <>
        <Script src="[calndlyScript]" />
      </>

      <div>
        <Link href="/hosts">
          <ArrowLeftIcon/>
          <h1>
            See all hosts
          </h1>
        </Link>
        <div>
          <div>
            <div>
              <div>
                <Image
                  src={profile.avatar_url}
                  alt="host's profile picture`"
                  width="150"
                  height="150"
                />
              </div>
              <h1>
                {profile.full_name}
              </h1>
              <p>
                {profile.languages}
              </p>
              <h2>
                {profile.bio}
              </h2>

              <div
                data-url={profile.calendar_embed}
              ></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

This code works in a local environment, but I can't get it to deploy, and I am unsure where the problem is. Does anybody have an idea?

Thanks in advance.

UPDATE: When running npm run build, I get this error in the terminal

[=== ] info  - Generating static pages (4/6)TypeError: Cannot read properties of null (reading 'avatar_url')
    at HostPage (LOCALPATH/.next/server/app/hosts/[username]/page.js:608:62)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

Error occurred prerendering page "/hosts/[username]". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of null (reading 'avatar_url')
    at HostPage (LOCALPATH/.next/server/app/hosts/[username]/page.js:608:62)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
info  - Generating static pages (6/6)

> Build error occurred
Error: Export encountered errors on following paths:
        /hosts/[username]/page: /hosts/[username]
    at LOCALPATH/node_modules/next/dist/export/index.js:409:19
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Span.traceAsyncFn (LOCALPATH/node_modules/next/dist/trace/trace.js:79:20)
    at async LOCALPATH/node_modules/next/dist/build/index.js:1398:21
    at async Span.traceAsyncFn (LOCALPATH/node_modules/next/dist/trace/trace.js:79:20)
    at async /LOCALPATH/node_modules/next/dist/build/index.js:1258:17
    at async Span.traceAsyncFn (LOCALPATH/node_modules/next/dist/trace/trace.js:79:20)
    at async Object.build [as default] (LOCALPATH/node_modules/next/dist/build/index.js:66:29)
Solution

  • For anybody with the same error, I was able to fix it by downgrading from Nextjs @latest to 13.0.2. Then the deployment went through, and changes are live.