-
Notifications
You must be signed in to change notification settings - Fork 128
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Introduce no nodejs compat flag error page (#479)
Co-authored-by: Greg Brimble <[email protected]>
- Loading branch information
1 parent
29d3041
commit 2423529
Showing
15 changed files
with
421 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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). |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
26 changes: 26 additions & 0 deletions
26
packages/next-on-pages/build-no-nodejs-compat-flag-static-error-page.mjs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); |
Binary file added
BIN
+54.6 KB
...ages/next-on-pages/no-nodejs-compat-flag-static-error-page/assets/img/input.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+52.3 KB
...ges/next-on-pages/no-nodejs-compat-flag-static-error-page/assets/img/result.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
250 changes: 250 additions & 0 deletions
250
packages/next-on-pages/no-nodejs-compat-flag-static-error-page/assets/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ></button> | ||
| </p> | ||
| </div> | ||
| </main> | ||
| </div> | ||
| <dialog> | ||
| <form method="dialog"> | ||
| <button>×</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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.