Next.js: Routing error in dev mode: TypeError: Cannot read property 'includes' of undefined

[abstractvector]

Bug report

Describe the bug

Beginning in Next.js v9.5.3, clicking on any internal link while running in development mode causes an error (shown below) which prevents the navigation from happening. It works fine in v9.5.2.

To Reproduce

I do not have a minimal reproduction example, but it is occurring in our private repo. Rolling back to v9.5.2 fixes the issue.

1. Launch dev server
2. Load any URL
3. Click any internal link

Unhandled Runtime Error
TypeError: Cannot read property 'includes' of undefined

Call Stack
Router._resolveHref
webpack-internal:///./node_modules/next/dist/next-server/lib/router/router.js (911:18)
Router._callee$
webpack-internal:///./node_modules/next/dist/next-server/lib/router/router.js (441:31)
tryCatch
webpack-internal:///./node_modules/regenerator-runtime/runtime.js (63:40)
Generator.invoke [as _invoke]
webpack-internal:///./node_modules/regenerator-runtime/runtime.js (293:22)
Generator.eval [as next]
webpack-internal:///./node_modules/regenerator-runtime/runtime.js (118:21)
asyncGeneratorStep
webpack-internal:///./node_modules/next/node_modules/@babel/runtime/helpers/asyncToGenerator.js (3:24)
_next
webpack-internal:///./node_modules/next/node_modules/@babel/runtime/helpers/asyncToGenerator.js (25:9)

Expected behavior

Expect browser to navigate to new href location.

Instead, it displays the error above and does not redirect.

Screenshots

System information

• OS: MacOS 10.15.6
• Browser: Brave Version 1.12.114 Chromium: 84.0.4147.135 (Official Build) (64-bit)
• Version of Next.js: 9.5.3
• Version of Node.js: 14.9.0

Additional context

We have a custom server, custom next.config.js and custom webpack configuration, but all seems to work fine in v9.5.2 and below. Also, this issue does not occur in production mode - only development mode.

[felixmosh]

Having the same issue :|

Looks like there is new end point which mapped to a file from the static folder, but it is a dynamic end point.

In my case, I have a Nginx server (in Dev) which serves all the files from _next/static from the static folder, but it is a dynamic file.

[KristjanRanna]

I was able to replicate the same issue using one of nextjs examples (blog guide).
Steps:
1) npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/basics-final"
2) cd nextjs-blog
3) npm i
4) npm run dev
5) Just keep refreshing the page (localhost:3000) until the error pops up, sometimes it is a different error ( "ChunkLoadError: Loading chunk 0 failed")

.

[mAAdhaTTah]

The issue is related to @felixmosh's comment. I can see my request to /_next/static/development/_devPagesManifest.json 404'ing because our setup has Nginx setup to serve files from the filesystem from /_next/static but Nextjs doesn't write that file to disk in development. I added a rule to my local nginx configuration to proxypass that particular route and the issue is resolved. Seems a bit odd to me that Next.js would serve a dynamic file from a static path. Perhaps this should be served under the /_next/data path?

[niz11]

Any solution?

Here is my test case:

Router.push({
  pathname: `/asset/${id}/book`,
  query: { date: selectedDate, appointmentType },
});

Worked fine on 9.3, the team updated to 9.5, and it's not working.

[felixmosh]

Any solution?

Here is my test case:

Router.push({
  pathname: `/asset/${id}/book`,
  query: { date: selectedDate, appointmentType },
});

Worked fine on 9.3, the team updated to 9.5, and it's not working.

Do you see the request for /_next/static/development/_devPagesManifest.json? is it successful?

[niz11]

Any solution?
Here is my test case:

Router.push({
  pathname: `/asset/${id}/book`,
  query: { date: selectedDate, appointmentType },
});

Worked fine on 9.3, the team updated to 9.5, and it's not working.

Do you see the request for /_next/static/development/_devPagesManifest.json? is it successful?

Doesn't seem to find it. Search results show: /_next/static/chunks/main.js?ts=1601455701236

The request error request I'm getting is:

Cannot GET //__nextjs_original-stack-frame

[abstractvector]

Thanks to @mAAdhaTTah I have been able to find a workaround for this. The issue is that the path /_next/static/development/_devPagesManifest.json is requested in development mode, yet the file doesn't exist - it is generated at runtime.

The custom routing was serving static files directly from disk, and assumes that anything in /_next/static/ is, well, static - and hence exists on disk. That has been true up to and including version 9.5.2.

The workaround is to bypass our static file serving for that URL. In my case (using KoaRouter), the easiest solution was to define an explicit route for this URL before my static file routes:

router.get('/_next/static/development/_devPagesManifest.json', ({ req, res }) =>
  handle(req, res)
);

While this is a workaround, I'm loathe to close the issue since I agree with @mAAdhaTTah that this URL should probably not be served from /_next/static, but could be moved to something like /_next/data or similar.

[ScriptedAlchemy]

I'm also getting this issue after upgrading to 9.5.5, from 9.3

Shows up in dev mode, I'm using custom server and custom routing (next routes) Looking at the output dist directory, i do not see the _devPagesManifest mentioned here

[abstractvector]

@ScriptedAlchemy that is correct, the _devPagesManifest.json file does not exist in the filesystem. Instead, it is generated dynamically at runtime, hence why you'll need to exclude it from your custom routing and allow it to be served by the Next application.

[ScriptedAlchemy]

@abstractvector thanks for that!

So what i did was pull in the standard next request handler as well as next-routes. next-routes deals with all the page routing, then i used the standard handler from next().getRequestHandler

  const app = createApp({
    log,
    logRequests,
    nextRoutesHandler,
    standardHandler: nextApp.getRequestHandler()
  });

// inside createApp

  app.get('/_next/static/development/_devPagesManifest.json', (req, res, next) => {
    standardHandler(req, res, next);
  });

did the trick. Not sure how / if this would refactor nicely into next-routes. But bringing the default handler in for this file did solve it

[haluvibe]

I see this issue whilst using mirage.js

[michaelbulpitt]

I see this issue whilst using mirage.js

@haluvibe If you add

this.passthrough('/_next/static/development/_devPagesManifest.json'); to the top of your routes() function in mirage.js that should solve the problem.

[delucca]

I see this issue whilst using mirage.js

@haluvibe If you add

this.passthrough('/_next/static/development/_devPagesManifest.json'); to the top of your routes() function in mirage.js that should solve the problem.

Just a quick note, if you're using a namespace, you should use this solution instead:

      this.passthrough((request) => {
        if (request.url === "/_next/static/development/_devPagesManifest.json") return true;
      });