Why is Azure Identity using Browserflow instead of the nodeflow in my Next js app?

Question

This is my first project using Next js and I am fairly new to building apps from the ground up like this instead of just tagging on to existing projects. I am getting an error from Azure Identity and I traced it back through the node modules. It looks like its trying to use the browserflow instead of the nodeflow.

Here is my file structure:

• project
  • pages
    • api
      • _middleware: calling util function
  • util
    • util function to access azure key vault

The exact error: error - (middleware)\node_modules@azure\identity\dist-esm\src\msal\browserFlows\msalAuthCode.js (8:0) @ TypeError: Cannot read property 'hash' of undefined

Line 8 is as follows: const redirectHash = self.location.hash;

Is there a configuration I need to check to make sure Identity doesn't trigger browserflow? Is there a different structure I need to follow? Any help would be appreciated!

Edit: So it seems to have something to do with calling the function in the middleware. I can use another function in that util file within an endpoint and it works fine, its just calling it in the middleware that causes the issue.

Answer 1

So i cross posted this with Next Js' github discussion board and one of the maintainers replied with the following: "Hi, this is because Middleware is run in the Edge Runtime, which is closer to the Browser environment in terms of APIs. (since browsers are following the standard Web APIs)"