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.

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;
      });

Having the same issue, everything works fine and after a few hot reload or manual page reloads, the app loads forever.

In the dev tools I can see that is fetches _devPagesManifest.json forever without a respone.

The only solution is the reload the whole app every time. When doing that I sometimes see the error TypeError: Cannot read property 'includes' of undefined on the page.

any news on this very very annoying bug ?

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”) .

I’ve installed miragejs and that has same error.

import { createServer } from "miragejs";

createServer({
    routes() {
        this.namespace = "mirage";

           this.get("/users", () => [
               { id: "1", name: "Luke" },
               { id: "2", name: "Leia" },
               { id: "3", name: "Anakin" },
           ]);
       }
});
``
![screenshot](https://user-images.githubusercontent.com/54434088/142168901-458c4421-3cee-45b5-bc90-9e8269c0c4ec.png)

createServer({
  routes() {
    this.namespace = 'api';

    // handles GET requests to /api/movies
    this.get("/movies", () => ({
      movies: [
        { id: 1, name: "Inception", year: 2010 },
        { id: 2, name: "Interstellar", year: 2014 },
        { id: 3, name: "Dunkirk", year: 2017 },
      ],
    }))

    // resets the namespace to the root
    this.namespace = "" // or this.namespace = "/"
    this.passthrough() // now this will pass through everything not handled to the current domain (e.g. localhost:3000)
  },
})

Please reset namespace this.namespace="" before passthrough. Example attached. Restart next server and try.

It work’s fine since I’m proxying it to the node server like this:

location / {
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_pass http://host.docker.internal:3000;
  }

This is how it looks in my local dev env (based on devilbox docker)

location = /_next/static/development/_devPagesManifest.json {
     access_log        off;
     log_not_found     off;
     expires -1;
     proxy_pass http://host.docker.internal:3000;
}

My Next.js app runs outside of the docker at port 3000

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.

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?

@aleyrizvi , thanks that works perfectly.

I’ve installed miragejs and that has same error.

import { createServer } from "miragejs";

createServer({
    routes() {
        this.namespace = "mirage";

           this.get("/users", () => [
               { id: "1", name: "Luke" },
               { id: "2", name: "Leia" },
               { id: "3", name: "Anakin" },
           ]);
       }
});
``
![screenshot](https://user-images.githubusercontent.com/54434088/142168901-458c4421-3cee-45b5-bc90-9e8269c0c4ec.png)

I’m getting this error after upgrading to React 17.0.02 and next 12.0.1 when I use <Link><a>...</a></Link>. The errors go away when I remove the <Link>, which is from next/link. But I need the Link, so I’m trying to figure out why this is happening.

router.js?aea3:243 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'includes')
    at resolveDynamicRoute (router.js?aea3:243)
    at Router._callee4$ (router.js?aea3:1036)
    at tryCatch (runtime.js?e26c:45)
    at Generator.invoke [as _invoke] (runtime.js?e26c:274)
    at Generator.prototype.<computed> [as next] (runtime.js?e26c:97)
    at asyncGeneratorStep (asyncToGenerator.js?59a4:3)
    at _next (asyncToGenerator.js?59a4:25)

Why would pages be null?

If I do a null check on pages in that router file, the error stops being thrown. However, when I click the <Link> on the page, I get this error:

router.js?aea3:1140 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'some')
    at Router._callee6$ (router.js?aea3:1140)
    at tryCatch (runtime.js?e26c:45)
    at Generator.invoke [as _invoke] (runtime.js?e26c:274)
    at Generator.prototype.<computed> [as next] (runtime.js?e26c:97)
    at asyncGeneratorStep (asyncToGenerator.js?59a4:3)
    at _next (asyncToGenerator.js?59a4:25)

Why is pageLoader broken, not doing its job?

Happens to our project too, no idea how to repro aside from hitting refresh on the browser a bunch of times. Took a screenshot of the error, maybe it helps.

@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

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.