Merge branch 'dev' into deferred-hang

.changeset/chatty-pears-float.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/react": patch
+---
+
+Narrowed the type of `fetcher.formEncType` to use `FormEncType` from `react-router-dom` instead of `string`

.changeset/chilly-impalas-prove.md

@@ -0,0 +1,7 @@
+---
+"@remix-run/react": patch
+"@remix-run/server-runtime": patch
+"@remix-run/testing": patch
+---
+
+Bump `react-router-dom@6.14.2-pre.0`

.changeset/handle-network-errors.md

@@ -0,0 +1,6 @@
+---
+"@remix-run/react": patch
+"@remix-run/server-runtime": patch
+---
+
+Properly handle `?_data` HTTP/Network errors that don't reach the Remix server and ensure they bubble to the `ErrorBoundary`

.changeset/mean-months-lick.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/react": patch
+---
+
+fix router race condition for hmr

DEVELOPMENT.md

@@ -107,7 +107,7 @@ By default, the Remix `rollup` build will strip any `console.debug` calls to avo
 REMIX_DEBUG=true yarn watch
 ```
 
-**`REMIX_LOCAL_BUILD_DIRECTORY`**
+**`LOCAL_BUILD_DIRECTORY`**
 
 When developing Remix locally, you often need to go beyond unit/integration tests and test your changes in a local Remix application. The easiest way to do this is to run your local Remix build and use this environment variable to direct `rollup` to write the output files directly into the local Remix application's `node_modules` folder. Then you just need to restart your local Remix application server to pick up the changes.
 
@@ -118,7 +118,7 @@ cd my-remix-app
 npm run dev
 
 # Tab 2 - remix repository
-REMIX_LOCAL_BUILD_DIRECTORY=../my-remix-app yarn watch
+LOCAL_BUILD_DIRECTORY=../my-remix-app yarn watch
 ```
 
 Now - any time you make changes in the Remix repository, they will be written out to the appropriate locations in `../my-remix-app/node_modules` and you can restart the `npm run dev` command to pick them up 🎉.

contributors.yml

@@ -142,6 +142,7 @@
 - efkann
 - eldarshamukhamedov
 - eltociear
+- emilbryggare
 - emzoumpo
 - eps1lon
 - esamattis
@@ -554,4 +555,7 @@
 - amir-ziaei
 - mrkhosravian
 - tanerijun
+- toufiqnuur
 - ally1002
+- defjosiah
+- AlemTuzlak

docs/guides/envvars.md

@@ -48,11 +48,24 @@ export async function loader() {
 
 If you're using the `@remix-run/cloudflare-pages` adapter, env variables work a little differently. Since Cloudflare Pages are powered by Functions, you'll need to define your local environment variables in the [`.dev.vars`][dev-vars] file. It has the same syntax as `.env` example file mentioned above.
 
-Then, in your `loader` functions, you can access environment variables directly on `context`:
+Then, you can pass those through via `getLoadContext` in your server file:
+
+```ts
+export const onRequest = createPagesFunctionHandler({
+  build,
+  getLoadContext(context) {
+    // Hand-off Cloudflare ENV vars to the Remix `context` object
+    return { env: context.env };
+  },
+  mode: process.env.NODE_ENV,
+});
+```
+
+And they'll be available via Remix's `context` in your `loader`/`action` functions:
 
 ```tsx
 export const loader = async ({ context }: LoaderArgs) => {
-  console.log(context.SOME_SECRET);
+  console.log(context.env.SOME_SECRET);
 };
 ```
 

integration/abort-signal-test.ts

@@ -44,7 +44,7 @@ test.beforeAll(async () => {
     },
   });
 
-  // This creates an interactive app using puppeteer.
+  // This creates an interactive app using playwright.
   appFixture = await createAppFixture(fixture);
 });
 

integration/bug-report-test.ts

@@ -84,7 +84,7 @@ test.beforeAll(async () => {
     },
   });
 
-  // This creates an interactive app using puppeteer.
+  // This creates an interactive app using playwright.
   appFixture = await createAppFixture(fixture);
 });
 

integration/defer-test.ts

@@ -590,7 +590,7 @@ test.describe("non-aborted", () => {
       },
     });
 
-    // This creates an interactive app using puppeteer.
+    // This creates an interactive app using playwright.
     appFixture = await createAppFixture(fixture);
   });
 
@@ -1276,7 +1276,7 @@ test.describe("aborted", () => {
       },
     });
 
-    // This creates an interactive app using puppeteer.
+    // This creates an interactive app using playwright.
     appFixture = await createAppFixture(fixture);
   });
 

integration/error-boundary-test.ts

@@ -1250,6 +1250,118 @@ test.describe("Default ErrorBoundary", () => {
   });
 });
 
+test("Allows back-button out of an error boundary after a hard reload", async ({
+  page,
+  browserName,
+}) => {
+  let _consoleError = console.error;
+  console.error = () => {};
+
+  let fixture = await createFixture({
+    config: {
+      future: {
+        v2_routeConvention: true,
+        v2_errorBoundary: false,
+      },
+    },
+    files: {
+      "app/root.jsx": js`
+        import { Links, Meta, Outlet, Scripts } from "@remix-run/react";
+
+        export default function App() {
+          return (
+            <html lang="en">
+              <head>
+                <Meta />
+                <Links />
+              </head>
+              <body>
+                <Outlet />
+                <Scripts />
+              </body>
+            </html>
+          );
+        }
+
+        export function ErrorBoundary({ error }) {
+          return (
+            <html>
+              <head>
+                <title>Oh no!</title>
+                <Meta />
+                <Links />
+              </head>
+              <body>
+                <h1 id="error">ERROR BOUNDARY</h1>
+                <Scripts />
+              </body>
+            </html>
+          );
+        }
+      `,
+      "app/routes/_index.jsx": js`
+        import { Link } from "@remix-run/react";
+
+        export default function Index() {
+          return (
+            <div>
+              <h1 id="index">INDEX</h1>
+              <Link to="/boom">This will error</Link>
+            </div>
+          );
+        }
+      `,
+
+      "app/routes/boom.jsx": js`
+        import { json } from "@remix-run/node";
+        export function loader() { return boom(); }
+        export default function() { return <b>my page</b>; }
+      `,
+    },
+  });
+
+  let appFixture = await createAppFixture(fixture);
+  let app = new PlaywrightFixture(appFixture, page);
+
+  await app.goto("/");
+  await page.waitForSelector("#index");
+  expect(app.page.url()).not.toMatch("/boom");
+
+  await app.clickLink("/boom");
+  await page.waitForSelector("#error");
+  expect(app.page.url()).toMatch("/boom");
+
+  await app.reload();
+  await page.waitForSelector("#error");
+  expect(app.page.url()).toMatch("boom");
+
+  await app.goBack();
+
+  // Here be dragons
+  // - Playwright sets the Firefox `fission.webContentIsolationStrategy=0` preference
+  //   for reasons having to do with out-of-process iframes:
+  //   https://github.com/microsoft/playwright/issues/22640#issuecomment-1543287282
+  // - That preference exposes a bug in firefox where a hard reload adds to the
+  //   history stack: https://bugzilla.mozilla.org/show_bug.cgi?id=1832341
+  // - Your can disable this preference via the Playwright `firefoxUserPrefs` config,
+  //   but that is broken until 1.34:
+  //   https://github.com/microsoft/playwright/issues/22640#issuecomment-1546230104
+  //   https://github.com/microsoft/playwright/issues/15405
+  // - We can't yet upgrade to 1.34 because it drops support for Node 14:
+  //   https://github.com/microsoft/playwright/releases/tag/v1.34.0
+  //
+  // So for now when in firefox we just navigate back twice to work around the issue
+  if (browserName === "firefox") {
+    await app.goBack();
+  }
+
+  await page.waitForSelector("#index");
+  expect(app.page.url()).not.toContain("boom");
+
+  appFixture.close();
+  console.error = _consoleError;
+});
+
 // Copy/Paste of the above tests altered to use v2_errorBoundary.  In v2 we can:
 // - delete the above tests
 // - remove this describe block
@@ -2518,4 +2630,117 @@ test.describe("v2_errorBoundary", () => {
       });
     });
   });
+
+  test("Allows back-button out of an error boundary after a hard reload", async ({
+    page,
+    browserName,
+  }) => {
+    let _consoleError = console.error;
+    console.error = () => {};
+
+    let fixture = await createFixture({
+      config: {
+        future: {
+          v2_routeConvention: true,
+          v2_errorBoundary: true,
+        },
+      },
+      files: {
+        "app/root.jsx": js`
+          import { Links, Meta, Outlet, Scripts, useRouteError } from "@remix-run/react";
+
+          export default function App() {
+            return (
+              <html lang="en">
+                <head>
+                  <Meta />
+                  <Links />
+                </head>
+                <body>
+                  <Outlet />
+                  <Scripts />
+                </body>
+              </html>
+            );
+          }
+
+          export function ErrorBoundary() {
+            let error = useRouteError();
+            return (
+              <html>
+                <head>
+                  <title>Oh no!</title>
+                  <Meta />
+                  <Links />
+                </head>
+                <body>
+                  <h1 id="error">ERROR BOUNDARY</h1>
+                  <Scripts />
+                </body>
+              </html>
+            );
+          }
+        `,
+        "app/routes/_index.jsx": js`
+          import { Link } from "@remix-run/react";
+
+          export default function Index() {
+            return (
+              <div>
+                <h1 id="index">INDEX</h1>
+                <Link to="/boom">This will error</Link>
+              </div>
+            );
+          }
+        `,
+
+        "app/routes/boom.jsx": js`
+          import { json } from "@remix-run/node";
+          export function loader() { return boom(); }
+          export default function() { return <b>my page</b>; }
+        `,
+      },
+    });
+
+    let appFixture = await createAppFixture(fixture);
+    let app = new PlaywrightFixture(appFixture, page);
+
+    await app.goto("/");
+    await page.waitForSelector("#index");
+    expect(app.page.url()).not.toMatch("/boom");
+
+    await app.clickLink("/boom");
+    await page.waitForSelector("#error");
+    expect(app.page.url()).toMatch("/boom");
+
+    await app.reload();
+    await page.waitForSelector("#error");
+    expect(app.page.url()).toMatch("boom");
+
+    await app.goBack();
+
+    // Here be dragons
+    // - Playwright sets the Firefox `fission.webContentIsolationStrategy=0` preference
+    //   for reasons having to do with out-of-process iframes:
+    //   https://github.com/microsoft/playwright/issues/22640#issuecomment-1543287282
+    // - That preference exposes a bug in firefox where a hard reload adds to the
+    //   history stack: https://bugzilla.mozilla.org/show_bug.cgi?id=1832341
+    // - Your can disable this preference via the Playwright `firefoxUserPrefs` config,
+    //   but that is broken until 1.34:
+    //   https://github.com/microsoft/playwright/issues/22640#issuecomment-1546230104
+    //   https://github.com/microsoft/playwright/issues/15405
+    // - We can't yet upgrade to 1.34 because it drops support for Node 14:
+    //   https://github.com/microsoft/playwright/releases/tag/v1.34.0
+    //
+    // So for now when in firefox we just navigate back twice to work around the issue
+    if (browserName === "firefox") {
+      await app.goBack();
+    }
+
+    await page.waitForSelector("#index");
+    expect(app.page.url()).not.toContain("boom");
+
+    appFixture.close();
+    console.error = _consoleError;
+  });
 });