Fix client chunk loading encoding for dynamic route (#57960)

We had added encoding the client component assets loaded from RSC manifest that we need to encode them to make sure when they're loaded on server and sent to client, the client will receive the encoded one. But the override of the webpack chunk loading method could be loaded later than react related chunks, that when client component is loaded first (e.g. `next/script`) and it triggers react loaded ealier than the overriding. Then the chunk could be encoded incorrectly.

Discussed with @gnoff and put this out as the 1st step solution to ensure the order. in the future we can try to get rid of the encoding by providing safer url

Fixes #57829

packages/next/src/client/app-next-dev.ts

@@ -1,9 +1,9 @@
 // TODO-APP: hydration warning
 
+import './app-webpack'
 import { appBootstrap } from './app-bootstrap'
 
 appBootstrap(() => {
-  require('./app-webpack')
   const { hydrate } = require('./app-index')
   hydrate()
 })

packages/next/src/client/app-next.ts

@@ -1,9 +1,9 @@
+// This import must go first because it needs to patch webpack chunk loading
+// before React patches chunk loading.
+import './app-webpack'
 import { appBootstrap } from './app-bootstrap'
 
 appBootstrap(() => {
-  // This import must go first because it needs to patch webpack chunk loading
-  // before React patches chunk loading.
-  require('./app-webpack')
   const { hydrate } = require('./app-index')
   // Include app-router and layout-router in the main chunk
   require('next/dist/client/components/app-router')

test/e2e/app-dir/navigation/app/router/dynamic-gsp/[slug]/error.js

@@ -0,0 +1,8 @@
+// Add error.js to let this file be added to the flight manifest,
+// and get url encoded, and load through react RSC renderer.
+
+'use client'
+
+export default function Error() {
+  return <div>My Error</div>
+}

test/e2e/app-dir/navigation/app/router/dynamic-gsp/[slug]/page.js

@@ -0,0 +1,7 @@
+export default function Page({ params }) {
+  return <div id="dynamic-gsp-content">{'slug:' + params.slug}</div>
+}
+
+export function generateStaticParams() {
+  return [{ slug: '1' }, { slug: '2' }, { slug: '3' }]
+}

test/e2e/app-dir/navigation/app/router/page.js

@@ -0,0 +1,23 @@
+'use client'
+
+import Script from 'next/script'
+import { useRouter } from 'next/navigation'
+
+export default function Page() {
+  const router = useRouter()
+  return (
+    <div>
+      <button
+        id="dynamic-link"
+        onClick={() => router.push('/router/dynamic-gsp/1/')}
+      >
+        Test routing
+      </button>
+      {/* adding a script here to make sure app internals might execute earlier */}
+      <Script
+        src="https://connect.facebook.net/en_US/sdk.js"
+        strategy="beforeInteractive"
+      />
+    </div>
+  )
+}

test/e2e/app-dir/navigation/navigation.test.ts

@@ -618,6 +618,19 @@ createNextDescribe(
           }
         }
       })
+
+      it('should load chunks correctly without double encoding of url', async () => {
+        const browser = await next.browser('/router')
+
+        await browser
+          .elementByCss('#dynamic-link')
+          .click()
+          .waitForElementByCss('#dynamic-gsp-content')
+
+        expect(await browser.elementByCss('#dynamic-gsp-content').text()).toBe(
+          'slug:1'
+        )
+      })
     })
 
     describe('SEO', () => {