Client side transition with middleware crashing

[Glumac7]

Link to the code that reproduces this issue

https://github.com/Glumac7/middleware-issues

To Reproduce

In order to reproduce this issue, you need to do the following in order:

1. Clone the repo
2. Install dependencies
3. Build the project and start it
4. Open the following URL: http://localhost:3000/test1
5. Open the dev console
6. With the page open, generate a new build and start it again
7. Once the new build is generated, press go to second page button
8. You should see an error page and an error in the console TypeError: Cannot read properties of undefined

How to make it "work":

1. In next.config.js, remove "api.ts" for pageExtensions
2. Do the steps 3 - 8
3. It should redirect to test2/234 instead of an _error.tsx

Alternatively, you could install next v13.4.12 using which you would not need to make these changes to next.config.js, because the error occurs from 13.4.13-canary.0 onward.

Current vs. Expected behavior

Currently, we are getting an error presumably due to the middleware. There are no props in _app.tsx when there is a new build and a client side redirect happens on an active user session. When we remove "api.ts" from pageExtensions, that is, remove the use of the middleware, it works, on both v13.4.12 and v13.4.13-canary.0. If we want to use the middleware, we would need to downgrade to v13.4.12.

Expected behaviour should be the same as it is in v13.4.12 (because the error happens from v13.4.13-canary.0 onward), that is, for props returned from getInitialProps and used in _app.tsx not to be undefined.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.3.0: Wed Dec 20 21:30:44 PST 2023; root:xnu-10002.81.5~7/RELEASE_ARM64_T6000
Binaries:
  Node: 18.18.0
  npm: 9.8.1
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.1.3
  eslint-config-next: 14.1.2
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Data fetching (gS(S)P, getInitialProps), Middleware / Edge (API routes, runtime)

Which stage(s) are affected? (Select all that apply)

next build (local), next start (local), Other (Deployed)

Additional context

It started happening from v13.4.13-canary.0 onward, meaning it also happens on the newest next release (v14.1.3 as of this writing). Works as expected on v13.4.12.

[joerayme]

Thank you for this! We were seeing the symptoms of this in production and couldn't figure it out—I've managed to reproduce this on our setup as well running v13.5.6, and using getStaticProps rather than getInitialProps—note that we don't have the pageExtensions option detailed in the 'make it work' steps, but just removing the middleware does the same thing. Our middleware is set up to only run on the homepage (/) and the same issue occurs. As soon as you remove the middleware it works.

It looks like when the middleware is enabled, requests to the /_next/data/<hash>/<path>.json file return an empty 200 response instead of a 404. The 404 allows next to reload the page to pick up the new data.

Did you find a fix for this?