Fix windows slashes for app client entry (#44052)

Fixes #43854 , followup for #44011. Normalize the bundlePath so it works
in all cases

## Bug

- [x] 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)

packages/next/build/webpack/plugins/flight-client-entry-plugin.ts

@@ -24,6 +24,7 @@ import {
 import { ASYNC_CLIENT_MODULES } from './flight-manifest-plugin'
 import { isClientComponentModule, regexCSS } from '../loaders/utils'
 import { traverseModules } from '../utils'
+import { normalizePathSep } from '../../../shared/lib/page-path/normalize-path-sep'
 
 interface Options {
   dev: boolean
@@ -96,9 +97,10 @@ export class FlightClientEntryPlugin {
           // additional queries to make sure there's no conflict even using the `named`
           // module ID strategy.
           let ssrNamedModuleId = path.relative(compiler.context, modResource)
+
           if (!ssrNamedModuleId.startsWith('.')) {
             // TODO use getModuleId instead
-            ssrNamedModuleId = `./${ssrNamedModuleId.replace(/\\/g, '/')}`
+            ssrNamedModuleId = `./${normalizePathSep(ssrNamedModuleId)}`
           }
 
           if (this.isEdgeServer) {
@@ -204,9 +206,9 @@ export class FlightClientEntryPlugin {
           : entryRequest
 
         // Replace file suffix as `.js` will be added.
-        const bundlePath = relativeRequest
-          .replace(/\.(js|ts)x?$/, '')
-          .replace(/^src[\\/]/, '')
+        const bundlePath = normalizePathSep(
+          relativeRequest.replace(/\.(js|ts)x?$/, '').replace(/^src[\\/]/, '')
+        )
 
         promises.push(
           this.injectClientEntryAndSSRModules({
@@ -509,10 +511,7 @@ export class FlightClientEntryPlugin {
     // Add for the client compilation
     // Inject the entry to the client compiler.
     if (this.dev) {
-      const pageKey = (COMPILER_NAMES.client + bundlePath).replace(
-        /\\/g,
-        path.posix.sep
-      )
+      const pageKey = COMPILER_NAMES.client + bundlePath
       if (!entries[pageKey]) {
         entries[pageKey] = {
           type: EntryTypes.CHILD_ENTRY,

test/integration/app-dir-basic/app/blog/page.js

@@ -1,3 +1,3 @@
 export default function page() {
-  return <>blog</>
+  return <div id="blog">this is blog</div>
 }

test/integration/app-dir-basic/app/page.js

@@ -1,3 +1,3 @@
 export default function page() {
-  return <>page</>
+  return <div id="home">this is home</div>
 }

test/integration/app-dir-basic/test/index.test.js

@@ -1,6 +1,7 @@
 /* eslint-env jest */
 
 import { join } from 'path'
+import cheerio from 'cheerio'
 import { runDevSuite, runProdSuite, renderViaHTTP } from 'next-test-utils'
 
 import webdriver from 'next-webdriver'
@@ -9,22 +10,22 @@ const appDir = join(__dirname, '..')
 function runTests(context, env) {
   describe('App Dir Basic', () => {
     it('should render html properly', async () => {
-      const indexHtml = await renderViaHTTP(context.appPort, '/')
-      const blogHtml = await renderViaHTTP(context.appPort, '/blog')
+      const $index = cheerio.load(await renderViaHTTP(context.appPort, '/'))
+      const $blog = cheerio.load(await renderViaHTTP(context.appPort, '/blog'))
 
-      expect(indexHtml).toContain('page')
-      expect(blogHtml).toContain('blog')
+      expect($index('#home').text()).toBe('this is home')
+      expect($blog('#blog').text()).toBe('this is blog')
     })
 
     it('should hydrate pages properly', async () => {
       const browser = await webdriver(context.appPort, '/')
-      const indexHtml = await browser.waitForElementByCss('body').text()
+      const indexHtml = await browser.waitForElementByCss('#home').text()
       const url = await browser.url()
       await browser.loadPage(url + 'blog')
-      const blogHtml = await browser.waitForElementByCss('body').text()
+      const blogHtml = await browser.waitForElementByCss('#blog').text()
 
-      expect(indexHtml).toContain('page')
-      expect(blogHtml).toContain('blog')
+      expect(indexHtml).toBe('this is home')
+      expect(blogHtml).toBe('this is blog')
     })
   })
 }