search

chronark / chronark.com

https://chronark.com
MIT License
667 stars 375 forks source link

Bug report for project page and project/[slug] page #4

Open liuxuan30 opened 1 year ago

liuxuan30 commented 1 year ago

Hi there,

First of all, Love your design.

I'm new to web development and react, now I'm trying to develop a personal site using your template from vercel.

I found two issues:

  1. when trying to open projects/page or http://localhost:3000/projects, it will likely to give error, especially when you try to refresh: 
    
Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching

in .

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Component Stack article a LinkComponent ./node_modules/next/dist/client/link.js (100:23) div Card ./app/components/card.tsx (26:11)


2. for projects/[slug] page, like /projects/planetfall, when click on the card, it also throws error (and sometimes can load the page),

error - Page changed from static to dynamic at runtime /projects/planetfall, reason: no-store fetch https://evolving-cougar-30891.upstash.io /projects/[slug] see more here https://nextjs.org/docs/messages/app-static-to-dynamic-error at globalThis.fetch (/Users/xuanliu/react/bio/MySite/node_modules/src/server/app-render.tsx:408:23) at HttpClient.request (webpack-internal:///(sc_server)/./node_modules/@upstash/redis/esm/pkg/http.js:94:29) at GetCommand.exec (webpack-internal:///(sc_server)/./node_modules/@upstash/redis/esm/pkg/commands/command.js:55:37) at PostPage (webpack-internal:///(sc_server)/./app/projects/[slug]/page.tsx:39:19) { page: '/projects/[slug]'


I tried to use

export const dynamic = "force-dynamic"

or

export const dynamic = 'force-dynamic' export const dynamicParams = true export const revalidate = false export const fetchCache = 'auto' export const runtime = 'nodejs' export const preferredRegion = 'auto'


from https://beta.nextjs.org/docs/api-reference/segment-config

seems also not working.

I'm trying to understand what's wrong and this, but seems I need your help or, you could kindly look into it.

I basically changed nothing from your code, just yarn install and yarn dev, it will throw above error.

I also tried to downgrade to next.js 3.1.6, seems the same issue.
liuxuan30 commented 1 year ago

I came across https://github.com/vercel/next.js/issues/44998 and using next.js 3.1.1 on my side indeed removes the second issue (using yarn dev). However, yours is using 3.2.4.

The first issue remains on 3.1.1 still though. Using 3.1.1 also lacks Metadata type, so I still hope we can fix this on 3.2.4

liuxuan30 commented 1 year ago

running 'next dev' (I use yarn dev basically) looks like give totally different output, it will remove below

Unhandled Runtime Error
Error: Dynamic server usage: no-store fetch https://evolving-cougar-30890.upstash.io/ /projects/[slug]

but adding new:

error - Error: Cannot find module 'next/dist/server/app-render/get-segment-param.js' Require stack:

liuxuan30 commented 1 year ago

it seems 

export async function generateStaticParams(): Promise<Props["params"][]> {
    return allProjects
        .filter((p) => p.published)
        .map((p) => ({
            slug: p.slug,
        }));
}

is kind of confusing, what's the purpose here to get a static slug? I do see

export default async function PostPage({ params }: Props)

could get the slug as well

Shall we delete generateStaticParams() here?

I commented it out, and seems PostPage still could get a valid slug? even with "http://localhost:3000/projects/upstash-cli" directly, without navigation.

Not sure what's going on here.

image

chronark commented 1 year ago

generateStaticParams will build all pages statically at build time, if you omit it, then they will be built only when requested

liuxuan30 commented 1 year ago

generateStaticParams will build all pages statically at build time, if you omit it, then they will be built only when requested

but then how to deal with the errors? worth mentioning next 3.1.1 has no issue. So I'm not sure how this should be handled.

chronark commented 1 year ago

Hmm I didn't notice the errors tbh, I'll check it out this week

daallgeier commented 1 year ago

Actually; i believe these are connected? https://github.com/chronark/chronark.com/issues/14

warifp commented 9 months ago

Yay. I found the answer after 2 days of no sleep, delete dir generate ".contentlayer" and run again "pnp run build".

LucasBonafe commented 8 months ago

Hmm I didn't notice the errors tbh, I'll check it out this week

I'm having the same problem: image

I believe they are related to the rendering of MDX files: image

42 is the answer!