Custom relative path assetPrefix breaks HMR

[fabb]

Bug report

Describe the bug

We have several next.js applications on the same domain, so we want to prefix _next requests. This works both for development and production:

module.exports = {
  assetPrefix: '/docs',
  rewrites() {
    return [
      { source: '/docs/_next/:path*', destination: '/_next/:path*' }
    ]
  }
}

The only thing that does not work are webpack-hmr calls. The calls will also be prefixed, but next.js returns a 404. Seems like the rewrites feature does not consider HMR calls.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Add the configuration mentioned above.
2. Start local development
3. See 404s for webpack-hmr calls in the browser network tab

Expected behavior

The rewrites feature should also rewrite HMR requests. In fact, doing the rewrites in a custom express server fixes HMR, so it should be possible.

System information

• OS: macOS Catalina
• Browser: Chrome 86
• Version of Next.js: 9.5.5
• Version of Node.js: 10.18.4

Additional context

As mentioned here: #5602 (comment)

[adam-foster]

Hi @fabb I experienced the same issue.

As a work around, you can add the assetPrefix / rewrites config for non development phases only. I.e:

const { PHASE_DEVELOPMENT_SERVER } = require('next/constants')

module.exports = (phase, { defaultConfig }) => {
  if (phase !== PHASE_DEVELOPMENT_SERVER) {
    return {
      assetPrefix: '/docs',
      rewrites() {
        return [
           { source: '/docs/_next/:path*', destination: '/_next/:path*' }
        ]
      }
    }
  }
  return {
    /* development only config options here */
  }
}

[fabb]

As a work around, you can add the assetPrefix / rewrites config for non development phases only.

In my case I cannot, because I have several next.js applications that I want to be able to run simultaneously in dev mode on localhost.

[meikidd]

I am getting same error in v10.2.3, curious any update on this issue?

[crutch12]

Bump

[crutch12]

Suddenly I found a workaround!

Just add redirects:

async redirects() {
  return [
    // @NOTE: "rewrites" breaks webpack-hmr, so we fix it here. See: https://github.com/vercel/next.js/issues/18080
    {
      source: '/:any*/_next/webpack-hmr:path*',
      destination: '/_next/webpack-hmr:path*',
      permanent: false,
    },
  ];
},

[fabb]

fixed in #30632

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