fix next-app-loader on windows (#39657)

## Bug

- [x] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`


Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
Co-authored-by: Jiachi Liu <4800338+huozhi@users.noreply.github.com>

packages/next/build/webpack/loaders/next-app-loader.ts

@@ -12,7 +12,7 @@ async function createTreeCodeFromPath({
   removeExt: (pathToRemoveExtensions: string) => string
 }) {
   let tree: undefined | string
-  const splittedPath = pagePath.split('/')
+  const splittedPath = pagePath.split(/[\\/]/)
   const appDirPrefix = splittedPath[0]
 
   const segments = ['', ...splittedPath.slice(1)]
@@ -26,7 +26,9 @@ async function createTreeCodeFromPath({
     if (i === segments.length - 1) {
       const resolvedPagePath = await resolve(pagePath)
       // Use '' for segment as it's the page. There can't be a segment called '' so this is the safest way to add it.
-      tree = `['', {}, {filePath: '${resolvedPagePath}', page: () => require('${resolvedPagePath}')}]`
+      tree = `['', {}, {filePath: ${JSON.stringify(
+        resolvedPagePath
+      )}, page: () => require(${JSON.stringify(resolvedPagePath)})}]`
       continue
     }
 
@@ -47,15 +49,15 @@ async function createTreeCodeFromPath({
         children ? `children: ${children},` : ''
       }
     }, {
-      filePath: '${resolvedLayoutPath}', 
+      filePath: '${resolvedLayoutPath}',
       ${
         resolvedLayoutPath
-          ? `layout: () => require('${resolvedLayoutPath}'),`
+          ? `layout: () => require(${JSON.stringify(resolvedLayoutPath)}),`
           : ''
       }
       ${
         resolvedLoadingPath
-          ? `loading: () => require('${resolvedLoadingPath}'),`
+          ? `loading: () => require(${JSON.stringify(resolvedLoadingPath)}),`
           : ''
       }
     }]`

packages/next/build/webpack/loaders/next-flight-client-entry-loader.ts

@@ -23,8 +23,10 @@ export default async function transformSource(this: any): Promise<string> {
       .filter((request) => (isServer ? !request.endsWith('.css') : true))
       .map((request) =>
         request.endsWith('.css')
-          ? `(() => import(/* webpackMode: "lazy" */ '${request}'))`
-          : `import(/* webpackMode: "eager" */ '${request}')`
+          ? `(() => import(/* webpackMode: "lazy" */ ${JSON.stringify(
+              request
+            )}))`
+          : `import(/* webpackMode: "eager" */ ${JSON.stringify(request)})`
       )
       .join(';\n') +
     `

packages/next/build/webpack/loaders/utils.ts

@@ -39,7 +39,7 @@ export function buildExports(moduleExports: any, isESM: boolean) {
 export const clientComponentRegex = new RegExp(
   '(' +
     `\\.client(\\.(${defaultJsFileExtensions.join('|')}))?|` +
-    `next/(${nextClientComponents.join('|')})(\\.js)?|` +
+    `next[\\\\/](${nextClientComponents.join('|')})(\\.js)?|` +
     `\\.(${imageExtensions.join('|')})` +
     ')$'
 )

packages/next/build/webpack/plugins/flight-manifest-plugin.ts

@@ -155,7 +155,8 @@ export class FlightManifestPlugin {
           mod.resourceResolveData?.path || resource
         )
         if (!ssrNamedModuleId.startsWith('.'))
-          ssrNamedModuleId = `./${ssrNamedModuleId}`
+          // TODO use getModuleId instead
+          ssrNamedModuleId = `./${ssrNamedModuleId.replace(/\\/g, '/')}`
 
         if (isCSSModule) {
           if (!manifest[resource]) {

packages/next/server/dev/hot-reloader.ts

@@ -4,7 +4,7 @@ import type { CustomRoutes } from '../../lib/load-custom-routes'
 import { getOverlayMiddleware } from 'next/dist/compiled/@next/react-dev-overlay/dist/middleware'
 import { IncomingMessage, ServerResponse } from 'http'
 import { WebpackHotMiddleware } from './hot-middleware'
-import { join, relative, isAbsolute } from 'path'
+import { join, relative, isAbsolute, posix } from 'path'
 import { UrlObject } from 'url'
 import {
   createEntrypoints,
@@ -666,9 +666,12 @@ export default class HotReloader {
                     this.appDir && bundlePath.startsWith('app/')
                       ? getAppEntry({
                           name: bundlePath,
-                          pagePath: join(
+                          pagePath: posix.join(
                             APP_DIR_ALIAS,
-                            relative(this.appDir!, entryData.absolutePagePath)
+                            relative(
+                              this.appDir!,
+                              entryData.absolutePagePath
+                            ).replace(/\\/g, '/')
                           ),
                           appDir: this.appDir!,
                           pageExtensions: this.config.pageExtensions,