Middleware won't deploy in subpath with error no-server-import-in-page with React Server Components and concurrentFeatures

[KlotzJesse]

What version of Next.js are you using?

12.0.8-canary.4

What version of Node.js are you using?

local: 14.8.1 // vercel: 12

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

Vercel

Describe the Bug

When deploying an NextJs App to Vercel, with having a _middleware.js / _middleware.ts in a sub-path of pages, e.g. /pages/dashboard/_middleware.ts
the build fails with:
Error: next/server should not be imported outside of pages/_middleware.js. See https://nextjs.org/docs/messages/no-server-import-in-page. @next/next/no-server-import-in-page

Expected Behavior

Deploy sucessfully

To Reproduce

With:
concurrentFeatures: true
serverComponents: true

Add:
/pages/test/_middleware.js

import { NextResponse } from "next/server";

export default async function middleware(req, event) {
  return NextResponse.next();
}

[KlotzJesse]

When added to /pages/_middleware.js:

It will deploy on vercel, but won't be executed. Related to #31803

When in sub path:
Normally, it won't even build, related to: #31659

All related to React Server Components, I think.

[balazsorban44]

This should have been fixed by #32139, but it looks like it wasn't. It reproduces with 12.0.8-canary.5 on my machine as you described.

This is an ESLint issue, something being wrong in https://github.com/thibautsabot/next.js/blob/canary/packages/eslint-plugin-next/lib/rules/no-server-import-in-page.js

@thibautsabot any ideas?

It will deploy on vercel, but won't be executed

That's already reported and in the backlog, so that's a duplicate of #31803.

[awareness481]

Given that has been a common error with eslint rules, I'm proposing a common utility that uses path.basename(page, path.extname) to avoid errors with the path or with extensions being either .tsx or .js (or even .jsx).

This could also require doing an additional check with path.win32 (https://nodejs.org/api/path.html#windows-vs-posix)

I think it would be a good idea to switch any code checking for a filename to the above. There are multiple rules that check for _document for example.

Edit: With a common utility it would also be easier for future contributors.

[thibautsabot]

Hey!

Really sorry about the hiccup 🙏 .

I'm unable to reproduce it with next and eslint-config-next on 12.0.8-canary.5 though 😕 .
Did you update both packages?

[balazsorban44]

@thibautsabot I forgot to check if I upgraded the ESLint plugin as well. 🤦‍♂️. Once I get home I'll try again.. 👀

[balazsorban44]

@thibautsabot is totally right.

This has been fixed in eslint-config-next@12.0.8-canary.0. Make sure you have that or a newer version!

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.