Repository: remix-run/remix
Pull request #5339 (2023-02-01 18:31:26)

fix(react): live reload works without scripts
Relates to #1601 


changeset-bot[bot]: ###  ⚠️  No Changeset found

Latest commit: 147154f08441800971b23086e509ee52eb19e302

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. **If these changes should result in a version bump, you need to add a changeset.**

<details><summary>This PR includes no changesets</summary>

  When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

</details>

[Click here to learn what changesets are, and how to add one](https://github.com/changesets/changesets/blob/master/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add a changeset to this PR](https://github.com/remix-run/remix/new/pedro/fix-live-reload-no-scripts?filename=.changeset/dull-masks-itch.md&value=---%0A%22remix%22%3A%20patch%0A%22%40remix-run%2Freact%22%3A%20patch%0A---%0A%0Afix(react)%3A%20live%20reload%20works%20without%20scripts%0A)



Patch:
diff --git a/.changeset/olive-jokes-invent.md b/.changeset/olive-jokes-invent.md
new file mode 100644
index 000000000..016fa16b8
--- /dev/null
+++ b/.changeset/olive-jokes-invent.md
@@ -0,0 +1,6 @@
+---
+"remix": patch
+"@remix-run/react": patch
+---
+
+fix(react): live reload works without `<Scripts />`
diff --git a/packages/remix-react/components.tsx b/packages/remix-react/components.tsx
index 348891a42..2109abd41 100644
--- a/packages/remix-react/components.tsx
+++ b/packages/remix-react/components.tsx
@@ -1570,7 +1570,7 @@ export const LiveReload =
                 function remixLiveReloadConnect(config) {
                   let protocol = location.protocol === "https:" ? "wss:" : "ws:";
                   let host = location.hostname;
-                  let port = (window.__remixContext.dev && window.__remixContext.dev.liveReloadPort) || ${String(
+                  let port = (window.__remixContext && window.__remixContext.dev && window.__remixContext.dev.liveReloadPort) || ${String(
                     port
                   )};
                   let socketPath = protocol + "//" + host + ":" + port + "/socket";


Test patch:
diff --git a/packages/remix-react/__tests__/components-test.tsx b/packages/remix-react/__tests__/components-test.tsx
index f9dcb3309..d9ef31e43 100644
--- a/packages/remix-react/__tests__/components-test.tsx
+++ b/packages/remix-react/__tests__/components-test.tsx
@@ -47,14 +47,14 @@ describe("<LiveReload />", () => {
       LiveReload = require("../components").LiveReload;
       let { container } = render(<LiveReload />);
       expect(container.querySelector("script")).toHaveTextContent(
-        "let port = (window.__remixContext.dev && window.__remixContext.dev.liveReloadPort) || 8002;"
+        "let port = (window.__remixContext && window.__remixContext.dev && window.__remixContext.dev.liveReloadPort) || 8002;"
       );
     });
 
     it("can set the port explicitly", () => {
       let { container } = render(<LiveReload port={4321} />);
       expect(container.querySelector("script")).toHaveTextContent(
-        "let port = (window.__remixContext.dev && window.__remixContext.dev.liveReloadPort) || 4321;"
+        "let port = (window.__remixContext && window.__remixContext.dev && window.__remixContext.dev.liveReloadPort) || 4321;"
       );
     });
 
@@ -62,7 +62,7 @@ describe("<LiveReload />", () => {
       process.env.REMIX_DEV_SERVER_WS_PORT = "1234";
       let { container } = render(<LiveReload />);
       expect(container.querySelector("script")).toHaveTextContent(
-        "let port = (window.__remixContext.dev && window.__remixContext.dev.liveReloadPort) || 1234;"
+        "let port = (window.__remixContext && window.__remixContext.dev && window.__remixContext.dev.liveReloadPort) || 1234;"
       );
     });