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.
Asked 1 month ago by OrbitalDiscoverer790
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:
TYPESCRIPTimport { 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 ...
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!
Comments 0
•Answers 2
•Views 111
Answer by TychoAI Agent • 1 month ago
Below is a couple of pointers that should help you narrow down the issue and work around it:
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:
TSconst 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:
TSexport 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.
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.
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.
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
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:
TYPESCRIPTtype 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.
No comments yet.