Ensure app chunk URLs are encoded properly (#46749

This ensures we properly encode chunks for app dir the same we do for
pages.

## Bug

- [ ] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have a helpful link attached, see
[`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)

x-ref: #8435

packages/next/src/client/app-index.tsx

@@ -24,7 +24,7 @@ const chunkFilenameMap: any = {}
 
 // eslint-disable-next-line no-undef
 __webpack_require__.u = (chunkId: any) => {
-  return chunkFilenameMap[chunkId] || getChunkScriptFilename(chunkId)
+  return encodeURI(chunkFilenameMap[chunkId] || getChunkScriptFilename(chunkId))
 }
 
 // Ignore the module ID transform in client.

test/e2e/app-dir/app/app/dynamic-client/[category]/[id]/layout.js

@@ -0,0 +1,11 @@
+export default function IdLayout({ children, params }) {
+  return (
+    <>
+      <h3>
+        Id Layout. Params:{' '}
+        <span id="id-layout-params">{JSON.stringify(params)}</span>
+      </h3>
+      {children}
+    </>
+  )
+}

test/e2e/app-dir/app/app/dynamic-client/[category]/[id]/page.js

@@ -0,0 +1,13 @@
+'use client'
+
+export default function IdPage({ children, params }) {
+  return (
+    <>
+      <p>
+        Id Page. Params:{' '}
+        <span id="id-page-params">{JSON.stringify(params)}</span>
+      </p>
+      {children}
+    </>
+  )
+}

test/e2e/app-dir/app/app/dynamic-client/[category]/layout.js

@@ -0,0 +1,11 @@
+export default function CategoryLayout({ children, params }) {
+  return (
+    <>
+      <h2>
+        Category Layout. Params:{' '}
+        <span id="category-layout-params">{JSON.stringify(params)}</span>{' '}
+      </h2>
+      {children}
+    </>
+  )
+}

test/e2e/app-dir/app/app/dynamic-client/layout.js

@@ -0,0 +1,11 @@
+export default function DynamicLayout({ children, params }) {
+  return (
+    <>
+      <h1>
+        Dynamic Layout. Params:{' '}
+        <span id="dynamic-layout-params">{JSON.stringify(params)}</span>
+      </h1>
+      {children}
+    </>
+  )
+}

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

@@ -16,6 +16,27 @@ createNextDescribe(
     },
   },
   ({ next, isNextDev: isDev, isNextStart, isNextDeploy }) => {
+    it('should encode chunk path correctly', async () => {
+      const browser = await next.browser('/')
+      const requests = []
+      browser.on('request', (req) => {
+        requests.push(req.url())
+      })
+
+      await browser.eval(
+        'window.location.href = "/dynamic-client/first/second"'
+      )
+
+      await check(async () => {
+        return requests.some(
+          (req) =>
+            req.includes(encodeURI('/[category]/[id]')) && req.endsWith('.js')
+        )
+          ? 'found'
+          : JSON.stringify(requests)
+      }, 'found')
+    })
+
     it.each([
       { pathname: '/redirect-1' },
       { pathname: '/redirect-2' },