From 5081ba86cdfe0a087f1c76255a0fc0740ea17a0b Mon Sep 17 00:00:00 2001
From: Tobias Koppers <tobias.koppers@googlemail.com>
Date: Tue, 16 Aug 2022 15:18:11 +0100
Subject: [PATCH] fix next-app-loader on windows

---
 packages/next/build/webpack/loaders/next-app-loader.ts | 6 +++---
 packages/next/server/dev/hot-reloader.ts               | 9 ++++++---
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/next/build/webpack/loaders/next-app-loader.ts b/packages/next/build/webpack/loaders/next-app-loader.ts
index 2f1e9ed84e75..afa4699a36a4 100644
--- a/packages/next/build/webpack/loaders/next-app-loader.ts
+++ b/packages/next/build/webpack/loaders/next-app-loader.ts
@@ -25,7 +25,7 @@ async function createTreeCodeFromPath({
     // First item in the list is the page which can't have layouts by itself
     if (i === segments.length - 1) {
       // 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 = `['', {}, {page: () => require('${pagePath}')}]`
+      tree = `['', {}, {page: () => require(${JSON.stringify(pagePath)})}]`
       continue
     }
 
@@ -48,12 +48,12 @@ async function createTreeCodeFromPath({
     }, {
       ${
         resolvedLayoutPath
-          ? `layout: () => require('${resolvedLayoutPath}'),`
+          ? `layout: () => require(${JSON.stringify(resolvedLayoutPath)}),`
           : ''
       }
       ${
         resolvedLoadingPath
-          ? `loading: () => require('${resolvedLoadingPath}'),`
+          ? `loading: () => require(${JSON.stringify(resolvedLoadingPath)}),`
           : ''
       }
     }]`
diff --git a/packages/next/server/dev/hot-reloader.ts b/packages/next/server/dev/hot-reloader.ts
index de362f9b5a5d..55ec29ee0114 100644
--- a/packages/next/server/dev/hot-reloader.ts
+++ b/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)
+                            posix.relative(
+                              this.appDir!,
+                              entryData.absolutePagePath
+                            )
                           ),
                           appDir: this.appDir!,
                           pageExtensions: this.config.pageExtensions,