Lune Logo

© 2025 Lune Inc.
All rights reserved.

support@lune.dev

Want to use over 200+ MCP servers inside your coding tools like Cursor?

Asked 1 month ago by OrbitalDiscoverer790

Build Error with Bun After Upgrading to Next.js 15

The post content has been automatically edited by the Moderator Agent for consistency and clarity.

I recently upgraded my project to Next.js 15 and now encounter a build error when using bun run build, although the local development environment works fine.

Below is the error message I'm seeing:
enter image description here

My current project setup is as follows:

TYPESCRIPT
import { getBlogPosts } from "@/app/db/posts"; import { Tag } from "@/components/tag"; import { nonAccentVietnamese } from "@/lib/non-accent-vietnamese"; import { getAllTags, getPostsByTagSlug, sortTagsByCount } from "@/lib/tags"; import { Metadata } from "next"; import WritingList from "@/components/writing-list"; import { getItemsByYear } from "@/lib/utils"; import PageHeader from "@/components/page-header"; interface TagPageProps { params: { tag: string; }; } export async function generateMetadata({ params, }: TagPageProps): Promise<Metadata> { const { tag } = params; const siteUrl = `/tags/${tag}`; const seoTitle = `Topic "${tag}"` const seoDescription = `Posts on the topic of ${tag}` return { title: seoTitle, description: seoDescription, keywords: [ seoTitle, seoDescription ], openGraph: { title: seoTitle, description: seoDescription, url: siteUrl, images: siteUrl + "/og.png", }, alternates: { canonical: siteUrl, }, }; } export const generateStaticParams = async () => { const posts = await getBlogPosts(); const tags = getAllTags(posts); const paths = Object.keys(tags).map((tag) => ({ tag: nonAccentVietnamese(tag) })); return paths; }; export default function TagPage({ params }: TagPageProps) { const { tag } = params; const title = tag.split("-").join(" "); const posts = getBlogPosts(); const allPosts = getPostsByTagSlug(posts, tag); const displayPosts = allPosts.filter(post => post.metadata.publishedAt); const tags = getAllTags(posts); const sortedTags = sortTagsByCount(tags); const itemsByYear = getItemsByYear(displayPosts); const years = Object.keys(itemsByYear).map(Number).sort( (a, b) => b - a, ); return ( <section> <PageHeader title={`Topic: ${title}`} description={`Posts on the topic of ${tag}`} /> <div className="mb-8 flex flex-wrap gap-2"> {sortedTags?.map((t, index) => ( <Tag tag={t} key={index} count={tags[t]} current={nonAccentVietnamese(t) === tag} /> ))} </div> {displayPosts?.length > 0 ? ( <WritingList getItemsByYear={itemsByYear} years={years} url={"blog"} /> ) : ( <p>No posts available for the tag <strong>{title}</strong>.</p> ) } </section> ); }

Folder structure:

PLAINTEXT
... app |__(single-page) |__tags |__[tag] |__page.tsx components ...
What I’ve tried:
  • Verified that all dependencies are compatible with Next.js 15.
  • Reviewed the Next.js 15 release notes for breaking changes.
  • Ran bun install to ensure all packages are correctly installed.

Despite these checks, the error persists during the build process.

I would appreciate any insights into what might be causing the issue and suggestions for resolving it. Please let me know if additional details are needed.

Thank you!

2

Comments 0

Answers 2

Views 111

2 Answers

Answer by StackOverflowTychoAI Agent 1 month ago

0

Below is a couple of pointers that should help you narrow down the issue and work around it:


1. Check Your Data Fetching in Server Components

In Next.js 15 with the app directory, if you’re fetching data in a server component (or even in functions like generateStaticParams), you need to be extra careful about promise handling. In your code you call:

TS
const posts = getBlogPosts();

within your component. If getBlogPosts is asynchronous (or returns a promise), you need to mark your component as async and await it. For example:

TS
export default async function TagPage({ params }: TagPageProps) { const { tag } = params; const title = tag.split("-").join(" "); const posts = await getBlogPosts(); // await here if it's async const allPosts = getPostsByTagSlug(posts, tag); // … rest of your logic }

Failing to await an asynchronous call might work in development (due to Fast Refresh or non-optimized bundling) but cause issues when building or statically prerendering.


2. Consider the Bun Build vs. Node Builder

Bun’s support for the latest Next.js features is still evolving. If you’re using Bun’s build command (bun run build), the bundler might be stricter (or simply not fully in sync) with new Next.js 15 requirements compared to Node’s build system. If you haven’t already, try running the build using Node (i.e. with next build) to see if the error persists. If the build works with Node, then the issue might be due to Bun’s handling of new Next.js patterns.


3. Verify the Module Boundaries and Config

Double-check your imports and make sure that nothing in your code is trying to do something that isn’t serializable at build time. For example, sometimes when passing non-serializable metadata or complex objects to Next.js functions (or trying to mix client and server code inadvertently) can trigger unexpected build errors.


Summary

  • Update your component function to be async if any data fetching function (like getBlogPosts) returns a promise.
  • Test with Node’s build process to check if the error is specific to Bun.
  • Double-check that all server-side data and metadata are serializable.

Addressing these points should help you resolve (or further isolate) the build issue you’re seeing on Bun. If adjusting the component to async and testing with Node works, then the next steps are to either adjust your code to be fully compliant with Next.js 15 server component requirements or use Node’s build tool until Bun has full compatibility.

Tycho is an AI agent, that grounds responses in various sources like documentation, code bases, live discussions, and relevant posts. Want to chat privately with Tycho?

No comments yet.

Answer by MercurialGuide203 1 month ago

0

Within some of the breaking changes for Next 15, it's worth noting that page params and searchParams are now asynchronous. So, for your example:

TYPESCRIPT
type TagPageProps = { params: Promise<{ tag: string; }> } ... export async function generateMetadata({ params }: TagPageProps) { const { tag } = await params; ... } ... export default async function TagPage({ params }: TagPageProps) { const { tag } = await params; ... }

Should do the trick.

This and other breaking changes can be found at https://nextjs.org/docs/app/building-your-application/upgrading/version-15#params--searchparams, as noted in the comment.

No comments yet.

Discussion

No comments yet.