Nextjs / Vercel / React related errors and solutions

• With free account, you should host each project in a different account to get the most free tier data.

1Type '({ children }: { children: React.ReactNode; }) => JSX.Element' is not assignable to type 'ElementType<ClassAttributes<HTMLPreElement> & HTMLAttributes<HTMLPreElement> & ExtraProps> | undefined'.
2
3Property 'children' is optional in type 'ClassAttributes<HTMLPreElement> & HTMLAttributes<HTMLPreElement> & ExtraProps' but required in type '{ children: ReactNode; }'.

1. Add custom Nextjs config
1typescript: {
2  ignoreBuildErrors: true
3}

2. Modify the declaration of React component
1// Instead of
2export const Pre = ({ children }: { children: React.ReactNode }) => {
3
4// Use
5export function Pre({ children }: React.ComponentProps<'pre'>) {

• Có thể do version mới bị, cái 13.4.4 ko bị! ← CHÍNH XÁC!!!, 13.4.12 vẫn bị ← 13.4.7 ko bị

Code that is only supposed to run in the browser should be executed inside useEffect. That's required because the first render should match the initial render of the server. If you manipulate that result it creates a mismatch and React won't be able to hydrate the page successfully.

• One reason: becauase I put process.env.ENV_MODE inside SinglePostTemplate ← remove it and everything is good!

• Read more: reactjs - Warning: Text content did not match. Server: "I'm out" Client: "I'm in" div - Stack Overflow

• Read more: Easily Fix React Hydration Errors | Travis Wimer
1// Add below in the client component who has the error
2const [hydrated, setHydrated] = useState(false)
3// Make sure all other useHooks are put here
4
5useEffect(() => {
6  setHydrated(true)
7}, [])
8
9if (!hydrated) {
10  return null
11}

• Thay đổi browser thì hết bị (Brave bị, Cốc Cốc không bị)

• Thay đổi port cũng không bị

• (tham khảo thêm)