Description
Hi,
After creating an app based on the Portfolio Blog Starter, following the instuctions, I ran into two different errors.
How to reproduce
- 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
- 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.