middleware.ts treated as a client side component

[mansdahlstrom1]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.5.0: Thu Jun  8 22:22:20 PDT 2023; root:xnu-8796.121.3~7/RELEASE_ARM64_T6000
    Binaries:
      Node: 16.20.0
      npm: 8.19.4
      Yarn: 1.22.19
      pnpm: 8.4.0
    Relevant Packages:
      next: 13.4.20-canary.6
      eslint-config-next: 13.4.19
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.2.2
    Next.js Config:
      output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

Middleware / Edge (API routes, runtime)

Link to the code that reproduces this issue or a replay of the bug

https://github.com/mansdahlstrom1/middleware-client-component-bug

To Reproduce

1. Create new Next app
2. Add middleware
3. mark middleware as server-only with import "server-only";

Describe the Bug

When using middleware we expect the middleware to run server-side only and to be able to use features like Cookies etc. But we are not able to do this as Next seem to think that the middleware is running client side.

Expected Behavior

MIddleware can be marked as server-only. Server side only features work in middleware.ts file.

OR

Clearer error message that explains the real error.

Which browser are you using? (if relevant)

116.0.5845.110

How are you deploying your application? (if relevant)

No response

_NEXT-1607

[raflymln]

I think you don't need to use import "server-only"; in middleware since that package is to mark server functions which separated in another file to not be able to be used on client component/client page. Middleware will always be executed on edge runtime which run on server, no matter if there is import "server-only" or not.

Is the bug still occurs if you remove the import "server-only" line?

[jerrycool123]

if you import another script marked with import "server-only";, the problem still persists.

[barryengineerapart]

A good example where the problem arises is with AuthJS: Middleware (with sensitive information that should not be downloaded to the client) is marked as server-only (for good reason) and falls victim to this bug. In this case, server-only is saving us from sharing sensitive information on the client, but the question comes in: Why is middleware even being bundled in client code? Perhaps there is a good reason, but if that is the case, then there must be a way to ensure that certain middleware is only run on the server.

[barryengineerapart]

Anyone found a solution to this yet?

[barryengineerapart]

It's kinda sad, we are about to abandon Next because of this :( In a last ditch effort, @timneutkens please can you try weigh on this issue. I don't know why it is getting so little attention - I suspect on the following is true:

1. It is very difficult to fix.
2. I am making a mountain out of a molehill.
3. Middleware is still under development and is not finalized yet?

[timneutkens]

@barryengineerapart I don't see why this issue would be a blocker for you, can you expand on that? It's just a matter of not using server-only in middleware for now until this issue is looked at / fixed. This is a bug, it's synced into our internal system but it's lower priority (less severe) than many other issues, so it'll take a while to get fixed from our side.

Middleware is not being bundled as client code / client component, server-only is a feature for React Server Components which is why it was implemented only for files that are compiled as server components. Middleware is compiled as "server-side code" instead. It's similar to pages/api in that way.

[mansdahlstrom1]

The issue here is not only the server-only. For me, it's that we can not use cookies(). I left 2 branches in my reproduction repo.

1. With server-only
2. Without server-only. This will also break the middleware

Branches here:
https://github.com/mansdahlstrom1/middleware-client-component-bug/branches

You can see the diff here: mansdahlstrom1/middleware-client-component-bug@main...without-server-only

[barryengineerapart]

@barryengineerapart I don't see why this issue would be a blocker for you, can you expand on that? It's just a matter of not using server-only in middleware for now until this issue is looked at / fixed. This is a bug, it's synced into our internal system but it's lower priority (less severe) than many other issues, so it'll take a while to get fixed from our side.

Middleware is not being bundled as client code / client component, server-only is a feature for React Server Components which is why it was implemented only for files that are compiled as server components. Middleware is compiled as "server-side code" instead. It's similar to pages/api in that way.

Thanks for replying @timneutkens. Just some context: We are evaluating Next for a large company (not affiliated to this GH profile).

The big problem is that middleware is tied directly to authz, which contains incredibly sensitive information. I do understand that no sensitive files will be leaked to the client by including these modules in the middleware without the sever-only. The problem is that without the server-only protection, these files can mistakenly be included in the client bundle. For example, it is easy to accidentally import a sensitive module with VSCode’s help to auto complete imports (this can happen without anyone noticing).

The above problems implies that Next is unable to pass a security audit. I don't know the solution, but I would like Next to work, so if this is not too big of a deal, I can try get someone on our team to submit a patch.

[ztanner]

The issue here is not only the server-only. For me, it's that we can not use cookies(). I left 2 branches in my reproduction repo.

1. With server-only
2. Without server-only. This will also break the middleware

Branches here: https://github.com/mansdahlstrom1/middleware-client-component-bug/branches

You can see the diff here: mansdahlstrom1/middleware-client-component-bug@main...without-server-only

Can you ensure you're using the latest canary? There was a bug accessing cookies in src/middleware but it should be fixed. For me there were no errors on your without-server-only branch after upgrading.