Adding warning about re-accessing request.formData() in all relevant places

src/content/docs/images/tutorials/optimize-user-uploaded-image.mdx

@@ -6,7 +6,7 @@ sidebar:
   order: 1
 ---
 
-import { WranglerConfig } from "~/components"
+import { WranglerConfig, Render } from "~/components"
 
 
 In this guide, you will build an app that accepts image uploads, overlays the image with a visual watermark, then stores the transformed image in your R2 bucket.
@@ -142,6 +142,8 @@ export default {
 };
 ```
 
+<Render file="request-dot-clone-warning" product="workers" />
+
 ## 4: Transform the image
 
 For every uploaded image, you want to perform the following actions:

src/content/docs/pages/functions/plugins/hcaptcha.mdx

@@ -5,6 +5,8 @@ sidebar:
   order: 1
 ---
 
+import { Render } from "~/components"
+
 The hCaptcha Pages Plugin validates hCaptcha tokens.
 
 ## Installation
@@ -35,6 +37,8 @@ export const onRequestPost: PagesFunction[] = [
 ];
 ```
 
+<Render file="request-dot-clone-warning" product="workers" />
+
 This Plugin only exposes a single route. It will be available wherever it is mounted. In the above example, because it is mounted in `functions/register.ts`, it will validate requests to `/register`. The Plugin is mounted with a single object parameter with the following properties.
 
 [`secret`](https://dashboard.hcaptcha.com/settings) (mandatory) and [`sitekey`](https://dashboard.hcaptcha.com/sites) (optional) can both be found in your hCaptcha dashboard.

src/content/docs/pages/functions/plugins/index.mdx

@@ -6,7 +6,7 @@ sidebar:
 
 ---
 
-import { DirectoryListing } from "~/components"
+import { DirectoryListing, Render } from "~/components"
 
 Cloudflare maintains a number of official Pages Plugins for you to use in your Pages projects:
 
@@ -136,6 +136,8 @@ export const onRequestPost = async (context) => {
 }
 ```
 
+<Render file="request-dot-clone-warning" product="workers" />
+
 ### 2. Type your Pages Plugin
 
 To create a good developer experience, you should consider adding TypeScript typings to your Plugin. This allows developers to use their IDE features for autocompletion, and also ensure that they include all the parameters you are expecting.

src/content/docs/pages/functions/plugins/turnstile.mdx

@@ -5,6 +5,8 @@ sidebar:
   order: 1
 ---
 
+import { Render } from "~/components"
+
 [Turnstile](/turnstile/) is Cloudflare's smart CAPTCHA alternative.
 
 The Turnstile Pages Plugin validates Cloudflare Turnstile tokens.
@@ -45,6 +47,8 @@ export const onRequestPost = [
 ];
 ```
 
+<Render file="request-dot-clone-warning" product="workers" />
+
 This Plugin only exposes a single route to verify an incoming Turnstile response in a `POST` as the `cf-turnstile-response` parameter. It will be available wherever it is mounted. In the example above, it is mounted in `functions/register.ts`. As a result, it will validate requests to `/register`.
 
 ## Properties

src/content/docs/pages/how-to/refactor-a-worker-to-pages-functions.mdx

@@ -3,6 +3,8 @@ pcx_content_type: how-to
 title: Refactor a Worker to a Pages Function
 ---
 
+import { Render } from "~/components"
+
 In this guide, you will learn how to refactor a Worker made to intake form submissions to a Pages Function that can be hosted on your Cloudflare Pages application. [Pages Functions](/pages/functions/) is a serverless function that lives within the same project directory as your application and is deployed with Cloudflare Pages. It enables you to run server-side code that adds dynamic functionality without running a dedicated server. You may want to refactor a Worker to a Pages Function for one of these reasons:
 
 1. If you manage a serverless function that your Pages application depends on and wish to ship the logic without managing a Worker as a separate service.
@@ -101,6 +103,8 @@ const HandleAirtableData = (body, env) => {
 };
 ```
 
+<Render file="request-dot-clone-warning" product="workers" />
+
 ### Refactor your Worker
 
 To refactor the above Worker, go to your Pages project directory and create a `/functions` folder. In `/functions`, create a `form.js` file. This file will handle form submissions.

src/content/docs/pages/tutorials/forms/index.mdx

@@ -9,6 +9,8 @@ languages:
   - JavaScript
 ---
 
+import { Render } from "~/components"
+
 In this tutorial, you will create a simple `<form>` using plain HTML and CSS and deploy it to Cloudflare Pages. While doing so, you will learn about some of the HTML form attributes and how to collect submitted data within a Worker.
 
 :::note[MDN Introductory Series]
@@ -271,6 +273,8 @@ With this handler in place, the example is now fully functional. When a submissi
 
 However, if you want to reply with a JSON object instead of the key-value pairs (an Array of Arrays), then you must do so manually. Recently, JavaScript added the [`Object.fromEntries`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries) utility. This works well in some cases; however, the example `<form>` includes a `movies` checklist that allows for multiple values. If using `Object.fromEntries`, the generated object would only keep one of the `movies` values, discarding the rest. To avoid this, you must write your own `FormData` to `Object` utility instead:
 
+<Render file="request-dot-clone-warning" product="workers" />
+
 ```js
 /**
  * POST /api/submit

src/content/docs/r2/api/workers/workers-api-usage.mdx

@@ -129,13 +129,7 @@ export default {
 };
 ```
 
-:::caution[Prevent potential errors when accessing request.body]
-
-The body of a [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) can only be accessed once. If you previously used `request.formData()` in the same request, you may encounter a TypeError when attempting to access `request.body`.<br/><br/>
-To avoid errors, create a clone of the Request object with `request.clone()` for each subsequent attempt to access a Request's body.
-Keep in mind that Workers have a [memory limit of 128MB per Worker](https://developers.cloudflare.com/workers/platform/limits#worker-limits) and loading particularly large files into a Worker's memory multiple times may reach this limit. To ensure memory usage does not reach this limit, consider using [Streams](https://developers.cloudflare.com/workers/runtime-apis/streams/).
-
-:::
+<Render file="request-dot-clone-warning" product="workers" />
 
 ## 5. Bucket access and privacy
 

src/content/docs/r2/tutorials/summarize-pdf.mdx

@@ -278,6 +278,8 @@ The above code does the following:
 
 Since the Worker code is written in TypeScript, you should run the following command to add the necessary type definitions. While this is not required, it will help you avoid errors.
 
+<Render file="request-dot-clone-warning" product="workers" />
+
 ```sh
 npm run cf-typegen
 ```

src/content/docs/turnstile/tutorials/implicit-vs-explicit-rendering.mdx

@@ -12,6 +12,8 @@ sidebar:
 
 ---
 
+import { Render } from "~/components";
+
 This tutorial will explore the two primary methods of implementing Turnstile to your website via **implicit or explicit rendering** using a detailed explanation, a step by step implementation guide, and examples on how to help you protect your web application security while maintaining a good user experience.
 
 ## Before you begin
@@ -235,6 +237,8 @@ export default {
 };
 ```
 
+<Render file="request-dot-clone-warning" product="workers" />
+
 ## Choose between implicit and explicit rendering
 
 Choosing the appropriate rendering method for Turnstile is important and effectively helps you to add it to your website while ensuring optimal performance and user experience. Both implicit and explicit rendering have their own advantages and are suited to different types of web applications. Refer to the table below that highlights the ideal use case for each of these rendering methods:

src/content/docs/workers/examples/read-post.mdx

@@ -17,14 +17,14 @@ description: Serve an HTML form, then read POST requests. Use also to read JSON
   or POST data from an incoming request.
 ---
 
+import { TabItem, Tabs, Render } from "~/components";
+
 If you want to get started quickly, click on the button below.
 
 [![Deploy to Cloudflare](https://deploy.workers.cloudflare.com/button)](https://deploy.workers.cloudflare.com/?url=https://github.com/cloudflare/docs-examples/tree/main/workers/read-post)
 
 This creates a repository in your GitHub account and deploys the application to Cloudflare Workers.
 
-import { TabItem, Tabs } from "~/components";
-
 <Tabs syncKey="workersExamples"> <TabItem label="JavaScript" icon="seti:javascript">
 
 ```js
@@ -291,3 +291,5 @@ export default app;
 ```
 
 </TabItem> </Tabs>
+
+<Render file="request-dot-clone-warning" product="workers" />

src/content/docs/workers/examples/turnstile-html-rewriter.mdx

@@ -14,7 +14,7 @@ description: Inject [Turnstile](/turnstile/) implicitly into HTML elements using
   the HTMLRewriter runtime API.
 ---
 
-import { TabItem, Tabs } from "~/components";
+import { TabItem, Tabs, Render } from "~/components";
 
 <Tabs syncKey="workersExamples"> <TabItem label="JavaScript" icon="seti:javascript">
 
@@ -326,3 +326,5 @@ export default {
 ```
 
 </TabItem>
+
+<Render file="request-dot-clone-warning" product="workers" />

src/content/docs/workers/tutorials/handle-form-submissions-with-airtable/index.mdx

@@ -202,6 +202,8 @@ async function submitHandler(request, env) {
 // export default ...
 ```
 
+<Render file="request-dot-clone-warning" product="workers" />
+
 While the majority of this function is concerned with parsing the request body (the data being sent as part of the request), there are two important things to note. First, if the HTTP method sent to this function is not `POST`, you will return a new response with the status code of [`405 Method Not Allowed`](https://httpstatuses.com/405).
 
 The variable `reqBody` represents a collection of fields, which are key-value pairs for each column in your Airtable table. By formatting `reqBody` as an object with a collection of fields, you are creating a new record in your table with a value for each field.

src/content/partials/workers/request-dot-clone-warning.mdx

@@ -0,0 +1,12 @@
+---
+{}
+---
+
+:::caution[Prevent potential errors when accessing request.body]
+
+The body of a [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) can only be accessed once. If you previously used `request.formData()` in the same request, you may encounter a TypeError when attempting to access `request.body`.
+
+To avoid errors, create a clone of the Request object with `request.clone()` for each subsequent attempt to access a Request's body.
+Keep in mind that Workers have a [memory limit of 128 MB per Worker](/workers/platform/limits#worker-limits) and loading particularly large files into a Worker's memory multiple times may reach this limit. To ensure memory usage does not reach this limit, consider using [Streams](/workers/runtime-apis/streams/).
+
+:::