Fix app client entry key for windows (#44011)

## Bug

The app client entry key was in win32 slashes like `app\blog`, and when
we add the new layer checking logic in #43197, `name.startsWith('app/')`
doesn't work.

Fixes #43854
Fixes #43902

<img width="862" alt="image"
src="https://user-images.githubusercontent.com/4800338/207641886-08ffc159-0516-4609-9a1f-8c8693586122.png">


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

azure-pipelines.yml

@@ -35,7 +35,8 @@ variables:
   PNPM_CACHE_FOLDER: $(Pipeline.Workspace)/.pnpm-store
   PNPM_VERSION: 7.3.0
   NEXT_TELEMETRY_DISABLED: '1'
-  node_version: ^14.19.0
+  node_14_version: ^14.19.0
+  node_16_version: ^16.8.0
 
 stages:
   - stage: Test
@@ -46,7 +47,7 @@ stages:
         steps:
           - task: NodeTool@0
             inputs:
-              versionSpec: $(node_version)
+              versionSpec: $(node_14_version)
             displayName: 'Install Node.js'
 
           - bash: |
@@ -84,7 +85,7 @@ stages:
 
           - task: NodeTool@0
             inputs:
-              versionSpec: $(node_version)
+              versionSpec: $(node_14_version)
             displayName: 'Install Node.js'
 
           - bash: |
@@ -107,3 +108,37 @@ stages:
           - script: node run-tests.js --type unit
             condition: eq(variables['isDocsOnly'], 'No')
             displayName: 'Run tests'
+
+      - job: test_integration_app_dir
+        pool:
+          vmImage: 'windows-2019'
+        steps:
+          - task: NodeTool@0
+            inputs:
+              versionSpec: $(node_16_version)
+            displayName: 'Install Node.js'
+
+          - bash: |
+              node scripts/run-for-change.js --not --type docs --exec echo "##vso[task.setvariable variable=isDocsOnly]No"
+            displayName: 'Check Docs Only Change'
+
+          - script: npm i -g pnpm@$(PNPM_VERSION)
+            condition: eq(variables['isDocsOnly'], 'No')
+
+          - script: pnpm config set store-dir $(PNPM_CACHE_FOLDER)
+            condition: eq(variables['isDocsOnly'], 'No')
+
+          - script: pnpm store path
+            condition: eq(variables['isDocsOnly'], 'No')
+
+          - script: pnpm install && pnpm run build
+            condition: eq(variables['isDocsOnly'], 'No')
+            displayName: 'Install and build'
+
+          - script: npx playwright install chromium
+            condition: eq(variables['isDocsOnly'], 'No')
+
+          - script: |
+              node run-tests.js -c 1 test/integration/app-dir-basic/test/index.test.js
+            condition: eq(variables['isDocsOnly'], 'No')
+            displayName: 'Run tests'

package.json

@@ -198,6 +198,7 @@
     "release": "6.3.1",
     "request-promise-core": "1.1.2",
     "resolve-from": "5.0.0",
+    "rimraf": "3.0.2",
     "sass": "1.54.0",
     "seedrandom": "3.0.5",
     "selenium-webdriver": "4.0.0-beta.4",

packages/create-next-app/package.json

@@ -45,7 +45,6 @@
     "cross-spawn": "6.0.5",
     "got": "10.7.0",
     "prompts": "2.1.0",
-    "rimraf": "3.0.2",
     "tar": "4.4.10",
     "update-check": "1.5.4",
     "validate-npm-package-name": "3.0.0"

packages/font/package.json

@@ -12,7 +12,7 @@
   ],
   "license": "MIT",
   "scripts": {
-    "build": "rm -rf dist && pnpm ncc-fontkit && tsc -d -p tsconfig.json",
+    "build": "rimraf dist && pnpm ncc-fontkit && tsc -d -p tsconfig.json",
     "prepublishOnly": "cd ../../ && turbo run build",
     "dev": "pnpm ncc-fontkit && tsc -d -w -p tsconfig.json",
     "typescript": "tsec --noEmit -p tsconfig.json",

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

@@ -509,7 +509,10 @@ export class FlightClientEntryPlugin {
     // Add for the client compilation
     // Inject the entry to the client compiler.
     if (this.dev) {
-      const pageKey = COMPILER_NAMES.client + bundlePath
+      const pageKey = (COMPILER_NAMES.client + bundlePath).replace(
+        /\\/g,
+        path.posix.sep
+      )
       if (!entries[pageKey]) {
         entries[pageKey] = {
           type: EntryTypes.CHILD_ENTRY,

packages/react-dev-overlay/package.json

@@ -12,7 +12,7 @@
   "author": "Joe Haddad <timer@vercel.com>",
   "license": "MIT",
   "scripts": {
-    "build": "rm -rf dist && tsc -d -p tsconfig.json",
+    "build": "rimraf dist && tsc -d -p tsconfig.json",
     "prepublishOnly": "cd ../../ && turbo run build",
     "dev": "tsc -d -w -p tsconfig.json",
     "typescript": "tsec --noEmit -p tsconfig.json"

packages/react-refresh-utils/package.json

@@ -12,7 +12,7 @@
   "author": "Joe Haddad <timer@vercel.com>",
   "license": "MIT",
   "scripts": {
-    "build": "rm -rf dist && tsc -d -p tsconfig.json",
+    "build": "rimraf dist && tsc -d -p tsconfig.json",
     "prepublishOnly": "cd ../../ && turbo run build",
     "dev": "tsc -d -w -p tsconfig.json"
   },

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

@@ -0,0 +1,3 @@
+export default function page() {
+  return <>blog</>
+}

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

@@ -0,0 +1,8 @@
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <head></head>
+      <body>{children}</body>
+    </html>
+  )
+}

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

@@ -0,0 +1,3 @@
+export default function page() {
+  return <>page</>
+}

test/integration/app-dir-basic/next.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  experimental: {
+    appDir: true,
+  },
+}

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

@@ -0,0 +1,33 @@
+/* eslint-env jest */
+
+import { join } from 'path'
+import { runDevSuite, runProdSuite, renderViaHTTP } from 'next-test-utils'
+
+import webdriver from 'next-webdriver'
+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')
+
+      expect(indexHtml).toContain('page')
+      expect(blogHtml).toContain('blog')
+    })
+
+    it('should hydrate pages properly', async () => {
+      const browser = await webdriver(context.appPort, '/')
+      const indexHtml = await browser.waitForElementByCss('body').text()
+      const url = await browser.url()
+      await browser.loadPage(url + 'blog')
+      const blogHtml = await browser.waitForElementByCss('body').text()
+
+      expect(indexHtml).toContain('page')
+      expect(blogHtml).toContain('blog')
+    })
+  })
+}
+
+runDevSuite('App Dir Basic', appDir, { runTests })
+runProdSuite('App Dir Basic', appDir, { runTests })