Ensure dev overlay uses basePath for requests

packages/react-dev-overlay/src/internal/components/CodeFrame/CodeFrame.tsx

@@ -46,12 +46,18 @@ export const CodeFrame: React.FC<CodeFrameProps> = function CodeFrame({
       params.append(key, (stackFrame[key] ?? '').toString())
     }
 
-    self.fetch(`/__nextjs_launch-editor?${params.toString()}`).then(
-      () => {},
-      () => {
-        // TODO: report error
-      }
-    )
+    self
+      .fetch(
+        `${
+          process.env.__NEXT_ROUTER_BASEPATH || ''
+        }/__nextjs_launch-editor?${params.toString()}`
+      )
+      .then(
+        () => {},
+        () => {
+          // TODO: report error
+        }
+      )
   }, [stackFrame])
 
   // TODO: make the caret absolute

packages/react-dev-overlay/src/internal/container/RuntimeError.tsx

@@ -24,12 +24,18 @@ const CallStackFrame: React.FC<{
       params.append(key, (f[key] ?? '').toString())
     }
 
-    self.fetch(`/__nextjs_launch-editor?${params.toString()}`).then(
-      () => {},
-      () => {
-        // TODO: report error
-      }
-    )
+    self
+      .fetch(
+        `${
+          process.env.__NEXT_ROUTER_BASEPATH || ''
+        }/__nextjs_launch-editor?${params.toString()}`
+      )
+      .then(
+        () => {},
+        () => {
+          // TODO: report error
+        }
+      )
   }, [hasSource, f])
 
   return (

packages/react-dev-overlay/src/internal/helpers/stack-frame.ts

@@ -53,9 +53,14 @@ export function getOriginalStackFrame(
     const controller = new AbortController()
     const tm = setTimeout(() => controller.abort(), 3000)
     const res = await self
-      .fetch(`/__nextjs_original-stack-frame?${params.toString()}`, {
-        signal: controller.signal,
-      })
+      .fetch(
+        `${
+          process.env.__NEXT_ROUTER_BASEPATH || ''
+        }/__nextjs_original-stack-frame?${params.toString()}`,
+        {
+          signal: controller.signal,
+        }
+      )
       .finally(() => {
         clearTimeout(tm)
       })

test/integration/basepath/pages/hello.js

@@ -46,5 +46,13 @@ export default () => (
     </Link>
     <div id="base-path">{useRouter().basePath}</div>
     <div id="pathname">{useRouter().pathname}</div>
+    <div
+      id="trigger-error"
+      onClick={() => {
+        throw new Error('oops heres an error')
+      }}
+    >
+      click me for error
+    </div>
   </>
 )

test/integration/basepath/test/index.test.js

@@ -18,6 +18,8 @@ import {
   File,
   nextStart,
   initNextServerScript,
+  getRedboxSource,
+  hasRedbox,
 } from 'next-test-utils'
 import fs, {
   readFileSync,
@@ -32,7 +34,28 @@ jest.setTimeout(1000 * 60 * 2)
 const appDir = join(__dirname, '..')
 
 const runTests = (context, dev = false) => {
-  if (!dev) {
+  if (dev) {
+    it('should render error in dev overlay correctly', async () => {
+      const browser = await webdriver(context.appPort, '/docs/hello')
+      await browser.elementByCss('#trigger-error').click()
+      expect(await hasRedbox(browser)).toBe(true)
+
+      const errorSource = await getRedboxSource(browser)
+      expect(errorSource).toMatchInlineSnapshot(`
+        "pages${
+          process.platform === 'win32' ? '\\' : '/'
+        }hello.js (52:14) @ onClick
+
+          50 |   id=\\"trigger-error\\"
+          51 |   onClick={() => {
+        > 52 |     throw new Error('oops heres an error')
+             |          ^
+          53 |   }}
+          54 | >
+          55 |   click me for error"
+      `)
+    })
+  } else {
     it('should add basePath to routes-manifest', async () => {
       const routesManifest = await fs.readJSON(
         join(appDir, '.next/routes-manifest.json')
@@ -349,7 +372,9 @@ describe('basePath development', () => {
 
   beforeAll(async () => {
     context.appPort = await findPort()
-    server = await launchApp(join(__dirname, '..'), context.appPort)
+    server = await launchApp(join(__dirname, '..'), context.appPort, {
+      env: { __NEXT_TEST_WITH_DEVTOOL: 1 },
+    })
   })
   afterAll(async () => {
     await killApp(server)