ONGOING TRIALS: BUILD ERRORS ON CLOUDFLARE PAGES
Although the Git push succeeded, deployment on Cloudflare Pages failed. I faced a series of errors one after another.
-
SYNTAX ERRORS
-
A JavaScript syntax error occurred due to an apostrophe inside a string, such as 'App's'.
-
Forgetting to close a JSX tag.
Solution: Wrap strings in double quotes, add missing closing tags, and fix basic syntax issues.
-
TYPESCRIPT TYPE ERRORS
-
getBlogPost could return null, but the null check was insufficient.
-
Initialized an array with useState([]) and then tried to assign a Contentful Entry type to it.
-
console.log was left inside JSX.
-
A number was passed to setAttribute.
Solution: Strengthen null checks, explicitly set the type like useState
-
CLOUDFLARE PAGES EDGE RUNTIME ERROR
-
The following routes were not configured to run with the Edge Runtime: ...
Solution: Add export const runtime = 'edge'; at the top of the page.tsx file.
Since blog/[lang]/tags/[tag]/page.tsx did not exist, a placeholder file was created with runtime = 'edge' added.
-
CLOUDFLARE PAGES NODE.JS COMPATIBILITY ERROR
-
no nodejs_compat compatibility flag set
Solution: In the Cloudflare Pages dashboard, go to [Settings] → [Functions] → [Compatibility Flags], add nodejs_compat, and enable it.
LESSONS LEARNED
-
Always add node_modules to .gitignore from the very beginning! (Basic, but most important)
-
Removing Git history is tough. Try BFG Repo-Cleaner first, and if that fails, use git filter-branch.
-
Always back up before using git filter-branch.
-
When using Next.js with Cloudflare Pages, export const runtime = 'edge'; and enabling the nodejs_compat flag are essential.
-
The only way to fix build errors is to address them one by one, patiently.
After overcoming this long battle, the joy of finally seeing the site display correctly was truly special.
I hope this article will help someone else struggling with the same errors.