Error running Portfolio Blog Starter

[aymec]

Hi,

After creating an app based on the Portfolio Blog Starter, following the instuctions, I ran into two different errors.

How to reproduce

1. Create the app from the example and run it

pnpm create next-app --example https://github.com/vercel/examples/tree/main/solutions/blog blog
cd blog
pnpm dev

2. Navigate to one of the blog articles, e.g. Embracing VIM [...]

Errors

Runtime error: A React Element from an older version of React was rendered

The first error is a runtime error that prevents rendering the article and the page displays the following message.

Application error: a server-side exception has occurred while loading localhost (see the server logs for more information).
Digest: 197683649

The logs display

 ⨯ [Error: A React Element from an older version of React was rendered. This is not supported. It can happen if:
- Multiple copies of the "react" package is used.
- A library pre-bundled an old copy of "react" or "react/jsx-runtime".
- A compiler tries to "inline" JSX instead of using the runtime.] {
  digest: '197683649'

By default, the blog is created with the canary version of next.js and alpha version of tailwindcss.
I tried using fixed stable versions and the problem still occurs. Below is the dependency list I used in package.json

"dependencies": {
    "@tailwindcss/postcss": "^4.0.0",
    "@types/node": "20.17.0",
    "@types/react": "^18.3.0",
    "@types/react-dom": "^18.3.0",
    "@vercel/analytics": "^1.5.0",
    "@vercel/speed-insights": "^1.2.0",
    "geist": "1.4.2",
    "next": "^15.2",
    "next-mdx-remote": "^5.0.0",
    "postcss": "^8.5.3",
    "react": "^18.3.0",
    "react-dom": "^18.3.0",
    "sugar-high": "^0.9.3",
    "tailwindcss": "^4.0.0",
    "typescript": "^5.8.3"
}

Proposed solution

The issue is described in this issue: Element rendered from older version of React error with next-mdx-remote.

I tried the proposed solution and it fixed the issue. I added a next.config.ts with the following content:

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  transpilePackages: ['next-mdx-remote'],
}
 
export default nextConfig

After fixing this, the blog article can be displayed.
Errors described below remain.

params.slug await / aync error

The second error encountered is the following. The blog article is diplayed, this error is only present in the logs.

Error: Route "/blog/[slug]" used `params.slug`. `params` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis
    at eval (app/blog/[slug]/page.tsx:55:64)
    at Array.find (<anonymous>)
    at Blog (app/blog/[slug]/page.tsx:55:28)
  53 |
  54 | export default function Blog({ params }) {
> 55 |   let post = getBlogPosts().find((post) => post.slug === params.slug)
     |                                                                ^
  56 |
  57 |   if (!post) {
  58 |     notFound()
Error: Route "/blog/[slug]" used `params.slug`. `params` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis
    at eval (app/blog/[slug]/page.tsx:15:64)
    at Array.find (<anonymous>)
    at Module.generateMetadata (app/blog/[slug]/page.tsx:15:28)
  13 |
  14 | export function generateMetadata({ params }) {
> 15 |   let post = getBlogPosts().find((post) => post.slug === params.slug)
     |                                                                ^
  16 |   if (!post) {
  17 |     return
  18 |   }
 GET /blog/vim 200 in 11240ms

Proposed solution

In app/blog/[slugs]/pages.tsx, make functions GetMetadata and Blog async, and await params:

Replace

export function generateMetadata({ params }) {
  let post = getBlogPosts().find((post) => post.slug === params.slug)

with

export async function generateMetadata({ params }) {
  const { slug } = await params
  let post = getBlogPosts().find((post) => post.slug === slug)

and

export default function Blog({ params }) {
  let post = getBlogPosts().find((post) => post.slug === params.slug)

with

export default async function Blog({ params }) {
  const { slug } = await params
  let post = getBlogPosts().find((post) => post.slug === slug)

After this change, no more error remains.

The end

Let me know if I should create a PR with those fixes for the example.

[shaoqin2]

exact same two errors, looks like very reasonable fixes

[iSpeakNerd]

Just ran into this myself digging into MDX on my site, thanks for doing the work of tracking down the fixes

[LeeFlyYoung]

thank you very much, it's very helpful!