Undefined environment variables during vercel build

Help
1

When fetching data in a server component, an environment variable is returning “undefined” during Vercel build unless prefixed with NEXT_PUBLIC. However, build passes locally.

//frontend/src/app/store/page.tsx

import FeaturedVendor from "@/components/featured-vendor";
import type { BusinessPrisma, CategoryPrisma } from "@repo/types";
import Image from "next/image";
import { Suspense } from "react";

export type FeaturedBusiness = Pick<
  BusinessPrisma,
  "id" | "name" | "logo_url" | "average_rating" | "total_reviews"
> & {
  category: CategoryPrisma;
};

const getBusinesses = async () => {
  const BASE_URL = process.env.API_URL;
  const data = await fetch(`${BASE_URL}/api/businesses`, {
    // cache: "force-cache",
    next: {
      // revalidate: 60 * 60 * 24, // 24 hours
    },
  });
  const businesses: FeaturedBusiness[] = await data.json();
  return businesses;
};

const businesses = await getBusinesses();

export default async function StorePage() {
  return (
      <Suspense fallback={<div>Loading...</div>}>
        <FeaturedVendor title="Restaurants near you" businesses={businesses} />
      </Suspense>
  );
}

Vercel Build Logs
[08:53:29.069] frontend:build: Error: Failed to collect configuration for /store[08:53:29.069] frontend:build: [cause]: TypeError: Failed to parse URL from undefined/api/businesses

It’s a turborepo

2

Found the solution:

Extra configuration for Turborepo is needed for env variables to work on vercel

3

Thanks for sharing what worked for you :smile:

4

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.