react-dev-overlay does not work correctly with basePath

[OnurGvnc]

Bug report

Describe the bug

react-dev-overlay does not work as expected when it is run with basePath because it sends a request to the /__nextjs_original-stack-frame and /__nextjs_launch-editor paths. however, when basePath is active, requests get 404 error because these paths are not actually available.

next.js/packages/react-dev-overlay/src/middleware.ts

Line 83 in 7f6c6f0

if (pathname === '/__nextjs_original-stack-frame') {

next.js/packages/react-dev-overlay/src/middleware.ts

Line 199 in 7f6c6f0

} else if (pathname === '/__nextjs_launch-editor') {

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

Line 56 in 7f6c6f0

.fetch(`/__nextjs_original-stack-frame?${params.toString()}`, {

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

Line 27 in 86160a5

self.fetch(`/__nextjs_launch-editor?${params.toString()}`).then(

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

Line 49 in 86160a5

self.fetch(`/__nextjs_launch-editor?${params.toString()}`).then(

To Reproduce

next.config.js

module.exports = {
  experimental: {
    basePath: '/blog',
  },
};

pages/index.js

export default function Index() {
  return (
    <div>
      <h1>Hi!</h1>
      {foo}
    </div>
  );
}

Expected behavior

System information

• OS: macOS
• Browser chrome
• Version of Next.js: 9.4.4
• Version of Node.js: 14.3.0

Additional context

I have resolved my problem temporarily by creating a custom server with the following method.

const express = require('express');
const next = require('next').default;
const port = parseInt(process.env.PORT, 10) || 3000;

const nextServer = next({
  dir: '.',
  dev: process.env.NODE_ENV !== 'production',
});

const handler = nextServer.getRequestHandler();
const app = express();

nextServer.prepare().then(() => {
  app.use((req, res) => {
    if (
      req.originalUrl.startsWith('/__nextjs_original-stack-frame') ||
      req.originalUrl.startsWith('/__nextjs_launch-editor')
    ) {
      req.url = '/blog' + req.originalUrl;
    }
    return handler(req, res);
  });
  app.listen(port, (err) => {
    if (err) {
      throw err;
    }
    console.log(`> Ready on port ${port} `);
  });
});

[ijjk]

@OnurGvnc this should be resolved in the latest canary of Next.js v9.4.5-canary.18

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.