cloudflare · dario-piotrowicz · Oct 6, 2023 · Oct 2, 2023 · Oct 2, 2023 · Oct 2, 2023
diff --git a/.changeset/fast-plants-shop.md b/.changeset/fast-plants-shop.md
@@ -0,0 +1,7 @@
+---
+'@cloudflare/next-on-pages': minor
+---
+
+Add new static error page that informs users when they forgot to set the `nodejs_compat` flag.
+This should be clearer that the simple text message we've been providing previously (which is
+still being used as a fallback in case the new page is not available for some reason).
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/next-on-pages/build-no-nodejs-compat-flag-static-error-page.mjs b/packages/next-on-pages/build-no-nodejs-compat-flag-static-error-page.mjs
@@ -0,0 +1,26 @@
+import { readdir, readFile, writeFile, mkdir } from 'fs/promises';
+
+import imageToBase64 from 'image-to-base64';
+
+const errorPagePath = './no-nodejs-compat-flag-static-error-page';
+
+let indexHtmlContent = await readFile(`./${errorPagePath}/assets/index.html`, {
+	encoding: 'utf-8',
+});
+
+const imgs = await readdir(`./${errorPagePath}/assets/img`);
+
+await Promise.all(
+	imgs.map(async img => {
+		const base64Data = await imageToBase64(
+			`./${errorPagePath}/assets/img/${img}`,
+		);
+		indexHtmlContent = indexHtmlContent.replace(
+			`src="./img/${img}"`,
+			`src="data:image/png;base64,${base64Data}"`,
+		);
+	}),
+);
+
+await mkdir(`./${errorPagePath}/dist`, { recursive: true });
+await writeFile(`./${errorPagePath}/dist/index.html`, indexHtmlContent);
diff --git a/...ages/next-on-pages/no-nodejs-compat-flag-static-error-page/assets/img/input.png b/...ages/next-on-pages/no-nodejs-compat-flag-static-error-page/assets/img/input.png
diff --git a/...ges/next-on-pages/no-nodejs-compat-flag-static-error-page/assets/img/result.png b/...ges/next-on-pages/no-nodejs-compat-flag-static-error-page/assets/img/result.png
diff --git a/packages/next-on-pages/no-nodejs-compat-flag-static-error-page/assets/index.html b/packages/next-on-pages/no-nodejs-compat-flag-static-error-page/assets/index.html
@@ -0,0 +1,250 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Error - no nodejs_compat compatibility flag</title>
+		<style>
+			html {
+				font-family:
+					-apple-system,
+					BlinkMacSystemFont,
+					Segoe UI,
+					Roboto,
+					Oxygen,
+					Ubuntu,
+					Helvetica Neue,
+					Arial,
+					sans-serif;
+				font-size: 62.5%;
+			}
+
+			body {
+				padding: 1rem;
+				display: flex;
+				justify-content: center;
+			}
+
+			body > div,
+			dialog {
+				max-width: 80rem;
+			}
+
+			h1 {
+				font-weight: 300;
+				display: flex;
+				align-items: baseline;
+				flex-wrap: wrap;
+			}
+
+			h2 {
+				font-weight: 400;
+				font-size: 2.3rem;
+			}
+
+			p {
+				font-size: 1.6rem;
+				font-weight: 300;
+			}
+
+			header {
+				margin-block-end: 3.5rem;
+			}
+
+			header .error {
+				font-size: 4rem;
+				margin-inline-end: 1rem;
+			}
+
+			header .error-description {
+				font-size: 2rem;
+			}
+
+			code {
+				color: rgb(59, 59, 59);
+			}
+
+			.what-can-i-do strong {
+				font-weight: 500;
+				display: inline-block;
+				margin-block-end: 0.5rem;
+			}
+
+			main {
+				display: flex;
+				flex-wrap: wrap;
+				gap: 2rem;
+			}
+
+			main > div {
+				flex: 1;
+			}
+
+			@media (width < 30rem) {
+				main {
+					flex-direction: column;
+				}
+			}
+
+			@media (width < 20rem) {
+				html {
+					font-size: 45%;
+				}
+			}
+
+			dialog {
+				width: 90vw;
+				height: 90vh;
+				display: flex;
+				flex-direction: column;
+				gap: 1rem;
+				border: 1px solid black;
+				border-radius: 10px;
+			}
+
+			dialog:not([open]) {
+				display: none;
+			}
+
+			dialog > div {
+				display: flex;
+				flex-direction: column;
+				overflow: auto;
+				padding: 1rem 2rem;
+			}
+
+			dialog > div * {
+				max-width: 100%;
+			}
+
+			dialog img {
+				margin: 1rem;
+				width: 90%;
+				display: block;
+			}
+
+			dialog > form {
+				align-self: flex-end;
+			}
+
+			dialog > form button {
+				font-size: 2.7rem;
+			}
+
+			dialog > form button:hover {
+				scale: 1.2;
+			}
+
+			button {
+				border: none;
+				background: none;
+				cursor: pointer;
+				padding: 0;
+			}
+
+			#more-details-btn {
+				font-style: italic;
+			}
+
+			#more-details-btn:hover {
+				text-decoration: underline;
+			}
+		</style>
+	</head>
+	<body>
+		<div>
+			<header>
+				<h1>
+					<span class="error">Node.JS Compatibility Error</span>
+					<span class="error-description"
+						>no <code>nodejs_compat</code> compatibility flag set</span
+					>
+				</h1>
+			</header>
+
+			<main>
+				<div class="what-happened">
+					<h2>What happened?</h2>
+					<p>
+						The page you've requested has been built using
+						<a
+							href="https://github.com/cloudflare/next-on-pages"
+							target="_blank"
+							>@cloudflare/next-on-pages</a
+						>, but hasn't been properly configured.
+					</p>
+				</div>
+
+				<div class="what-can-i-do">
+					<h2>What can I do?</h2>
+					<p>
+						<strong>If you are the owner of this website:</strong>
+						<br />
+						You should go to the Pages project's
+						<a
+							href="https://dash.cloudflare.com/?to=/:account/pages/view/:pages-project/settings/functions#compatibility_flags_section"
+							target="_blank"
+							>Compatibility Flags settings section</a
+						>
+						and add the <code>nodejs_compat</code> flag to both your production
+						and preview environments.
+					</p>
+					<p>
+						<button id="more-details-btn">More details &gt;</button>
+					</p>
+				</div>
+			</main>
+		</div>
+		<dialog>
+			<form method="dialog">
+				<button>&times;</button>
+			</form>
+			<div>
+				<p>
+					In the
+					<a href="https://dash.cloudflare.com/" target="_blank"
+						>Cloudflare dashboard</a
+					>
+					go to your Pages project and navigate to the
+					<a
+						href="https://dash.cloudflare.com/?to=/:account/pages/view/:pages-project/settings/functions"
+						target="_blank"
+						>Functions settings page</a
+					>.
+				</p>
+
+				<p>
+					Then, in the Compatibility Flags section for both the production and
+					preview environments, type <code>nodejs_compat</code> in the input box
+					and click on Save to apply the changes:
+					<img
+						src="./img/input.png"
+						alt="screenshot showing how to input compatibility flags"
+					/>
+				</p>
+
+				<p>
+					At the end of the operation this is how your Compatibility Flags
+					section should look like:
+					<img
+						src="./img/result.png"
+						alt="screenshot showing how to compatibility flags should be after having been set"
+					/>
+				</p>
+
+				<p>
+					<strong>Important!</strong>
+					After setting the Compatibility Flags, you need to re-deploy your
+					application in order for them to take effect.
+				</p>
+			</div>
+		</dialog>
+	</body>
+	<script>
+		const dialog = document.querySelector('dialog');
+		const moreDetailsBtn = document.querySelector('#more-details-btn');
+		moreDetailsBtn.addEventListener('click', () => {
+			dialog.showModal();
+		});
+	</script>
+</html>
diff --git a/packages/next-on-pages/package.json b/packages/next-on-pages/package.json
@@ -7,13 +7,15 @@
 		"types-check": "tsc --noEmit",
 		"build": "esbuild --bundle --platform=node ./src/index.ts --external:esbuild --external:chokidar --outfile=./dist/index.js",
 		"build:watch": "npm run build -- --watch=forever",
+		"postbuild": "node ./build-no-nodejs-compat-flag-static-error-page.mjs",
 		"prepare": "npm run build",
 		"test:unit": "npx vitest --config vitest.config.ts"
 	},
 	"files": [
 		"bin",
 		"dist",
-		"templates"
+		"templates",
+		"no-nodejs-compat-flag-static-error-page/dist"
 	],
 	"keywords": [
 		"cloudflare",
@@ -64,6 +66,7 @@
 		"prettier": "^2.8.4",
 		"typescript": "^5.0.4",
 		"vitest": "^0.32.2",
-		"vitest-environment-miniflare": "^2.13.0"
+		"vitest-environment-miniflare": "^2.13.0",
+		"image-to-base64": "^2.2.0"
 	}
 }