refactor(vercel#41164): polyfill-module should block hydration (verce…

…l#41352) The PR continues from vercel#41164. `next/script` with `beforeInteractive` should not block the hydration, **but the `polyfill-nomodule` *should* block the hydration** (and should be loaded before other scripts), as `polyfill-nomodule` includes multiple polyfills to even execute `main-app.[hash].js` properly on old browsers (`Array.prototype.includes`, `String.prototype.startsWith`, etc.). Without `polyfill-nomodule` being loaded first, the entire bootstrap/hydration process might not even work on old browsers. So it should not be loaded through `__next_s`. cc @shuding Co-authored-by: Shu Ding <g@shud.in>
Kikobeats · Oct 24, 2022 · 1b9d69f · 1b9d69f
1 parent d4b3c32
commit 1b9d69f
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 10 deletions.
diff --git a/packages/next/server/app-render.tsx b/packages/next/server/app-render.tsx
@@ -1479,17 +1479,10 @@ export async function renderToHTMLOrFlight(
                   return (
                     <script
                       key={polyfill.src}
+                      src={polyfill.src}
+                      integrity={polyfill.integrity}
                       noModule={true}
                       nonce={nonce}
-                      dangerouslySetInnerHTML={{
-                        __html: `(self.__next_s=self.__next_s||[]).push([${JSON.stringify(
-                          polyfill.src
-                        )},${
-                          polyfill.integrity
-                            ? JSON.stringify({ integrity: polyfill.integrity })
-                            : '{}'
-                        }])`,
-                      }}
                     />
                   )
                 })}

diff --git a/test/e2e/app-dir/index.test.ts b/test/e2e/app-dir/index.test.ts
@@ -121,7 +121,9 @@ describe('app dir', () => {
 
     it('should serve polyfills for browsers that do not support modules', async () => {
       const html = await renderViaHTTP(next.url, '/dashboard/index')
-      expect(html).toMatch(/\/_next\/static\/chunks\/polyfills(-.+)?\.js/)
+      expect(html).toMatch(
+        /<script src="\/_next\/static\/chunks\/polyfills(-\w+)?\.js" nomodule="">/
+      )
     })
 
     // TODO-APP: handle css modules fouc in dev