fix(remix-dev/vite): fix LiveReload component nonce prop (#8014)

Co-authored-by: Mark Dalgleish <mark.john.dalgleish@gmail.com>
remix-run · Nov 20, 2023 · 23a6c4c · 23a6c4c
1 parent df51947
commit 23a6c4c
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/.changeset/famous-points-punch.md b/.changeset/famous-points-punch.md
@@ -0,0 +1,5 @@
+---
+"@remix-run/dev": patch
+---
+
+Support `nonce` prop on `LiveReload` component in Vite dev
diff --git a/integration/vite-dev-test.ts b/integration/vite-dev-test.ts
@@ -56,7 +56,7 @@ test.describe("Vite dev", () => {
                     <Outlet />
                   </div>
                   <Scripts />
-                  <LiveReload />
+                  <LiveReload nonce="1234" />
                 </body>
               </html>
             );
@@ -268,6 +268,9 @@ test.describe("Vite dev", () => {
     await expect(hmrStatus).toHaveText("HMR updated: yes");
     await expect(input).toHaveValue("stateful");
 
+    // check LiveReload script has nonce
+    await expect(page.locator(`script[nonce="1234"]`)).toBeAttached();
+
     // Ensure no errors after HMR
     expect(pageErrors).toEqual([]);
   });

diff --git a/packages/remix-dev/vite/plugin.ts b/packages/remix-dev/vite/plugin.ts
@@ -956,7 +956,8 @@ export const remixVitePlugin: RemixVitePlugin = (options = {}) => {
             `export const LiveReload = ${
               viteCommand !== "serve"
             } ? () => null : `,
-            '() => createElement("script", {',
+            '({ nonce = undefined }) => createElement("script", {',
+            "  nonce,",
             "  dangerouslySetInnerHTML: { ",
             "    __html: `window.__remixLiveReloadEnabled = true`",
             "  }",