Open mstys opened 11 months ago
I also started to see this today after I upgrade Next.js to 13.5.4
same issue
There's a warning from the console, please run the standalone server instead
"next start" does not work with "output: standalone" configuration. Use "node .next/standalone/server.js" instead.
@huozhi it's warning not error. If you think that it works as expected it should throw error and not start.
"next start" does not work with "output: standalone" configuration.
- means that standalone features are not running , not full Next app.
Moreover app works correctly without middleware.
@huozhi I tested it standalone mode as well before I created an issue, and got following error:
➜ next13-test git:(main) ✗ node .next/standalone/server.js
(node:94767) ExperimentalWarning: stream/web is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
▲ Next.js 13.5.4
- Local: http://localhost:3000
- Network: http://0.0.0.0:3000
✓ Ready in 124ms
[
{
label: 'Your personal data',
fields: [
[Object], [Object],
[Object], [Object],
[Object], [Object],
[Object], [Object],
[Object], [Object],
[Object]
]
}
]
{ list: [ { label: 'Your personal data', fields: [Array] } ] }
TypeError: Cannot read properties of undefined (reading 'bind')
at NextNodeServer.handleRequestImpl (/Users/michal.stys/OwnProjects/next13-test/.next/standalone/node_modules/next/dist/server/base-server.js:389:50)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
TypeError: Cannot read properties of undefined (reading 'bind')
at NextNodeServer.handleRequestImpl (/Users/michal.stys/OwnProjects/next13-test/.next/standalone/node_modules/next/dist/server/base-server.js:389:50)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
@huozhi, this still exists - not sure why it's closed. This break features based on middleware and have other problem on Vercel, like sharp module not found
even though it's added as dependency in package.json
@mstys I couldn't repro that error with with-docker example and that middleware
➜ nextjs-docker git:(main) ✗ node ./.next/standalone/server.js
▲ Next.js 13.5.4
- Local: http://localhost:3000
- Network: http://0.0.0.0:3000
✓ Ready in 36ms
@Phoenix-Alpha sharp module not found
sounds like a different issue, unrelated to this. Please open a new issue with reproduction
@huozhi you add middleware to project?
// middleware.ts
import { NextRequest, NextResponse } from "next/server";
const PUBLIC_FILE = /\.(.*)$/;
export async function middleware(req: NextRequest) {
if (
req.nextUrl.pathname.startsWith("/_next") ||
req.nextUrl.pathname.includes("/api/") ||
PUBLIC_FILE.test(req.nextUrl.pathname)
) {
return;
}
if (req.nextUrl.locale === "default") {
const locale = "en";
return NextResponse.redirect(
new URL(`/${locale}${req.nextUrl.pathname}${req.nextUrl.search}`, req.url)
);
}
}
then try again
I did, I cannot repro it
The bug is reproducible on Node.js 19 and above, with bare next app (obtained frompnpm create next-app
) with the simplest middleware:
import { NextResponse } from "next/server";
export function middleware() {
return NextResponse.next();
}
I got it on Node.js 20 (It will become the LTS on 24 of October) and with the unset output
field in next.config.js
I ran into this error as well. I could reproduce it only if I put the middleware.js file in root (I used the with-docker repo).
docker build -t nextjs-docker .
docker run -p 3000:3000 nextjs-docker
▲ Next.js 13.5.6
- Local: http://localhost:3000
- Network: http://0.0.0.0:3000
✓ Ready in 158ms
TypeError: Cannot read properties of undefined (reading 'bind')
at NextNodeServer.handleRequestImpl (/app/node_modules/next/dist/server/base-server.js:389:50)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
TypeError: Cannot read properties of undefined (reading 'bind')
at NextNodeServer.handleRequestImpl (/app/node_modules/next/dist/server/base-server.js:389:50)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
However when I renamed the file from middleware.js
to _middlewere.js
the error dissapered. I tired this in my own project and the renaming indeed removes the error. I haven't ran all tests yet but I'll continue investigate this further tomorrow.
From the docs we can read:
For example, a Middleware at pages/about/_middleware.ts can move the logic to
/middleware.ts in the root of your repository. Then, a conditional statement can be used to only run the Middleware when it matches the about/* path:
Is it possible it should say "
Here is a minimal reproduction of the behaviour: nextjs-docker.zip
I am running to the same issue on Node.js v18.15.0
For me, the issue was that the middleware was being applied to my /ws
(custom websocket) endpoint. I don't need any middleware on that endpoint, so adding this to middleware.ts
fixes it:
export const config = {
matcher: '/((?!ws$).*)', // match all paths except /ws
}
Same issue here, it will fix in the future right? I saw a similar issue closed (issues/55802)
I think I might be know what is happening in most of the cases with this @spencerchang @mstys . Did you have a browser tab open with the app left running in dev mode? (Given HMR tries to connect over websockets)
This error seems to occur when trying to connect to a standalone server in websocket mode with middleware enabled.
the handleRequestImpl
method assumes that the passed res._res is always going to be a ServerResponse
but can be passed as a socket when calling the endpoint as a websocket:
(Try calling standalone server with new WebSocket ( "ws://127.0.0.1:3000" )
from a browser tab)
Think it might be worth excluding anything trying to connect over ws://
as a whole from being run as middleware @huozhi given the assumptions made in the current code? :thinking:
next.js 14.0.4 this issue still happened.
I experienced this error message earlier after upgrading to Next v14 — i needed to upgrade my Clerk package, it turned out. The error went away after.
Check any middleware that your middleware may be using.
$ /app/node_modules/.bin/next info
Operating System:
Platform: linux
Arch: x64
Version: #82-Ubuntu SMP Tue Jun 6 23:10:23 UTC 2023
Binaries:
Node: 18.17.1
npm: 9.6.7
Yarn: 1.22.19
pnpm: N/A
Relevant Packages:
next: 13.5.6
eslint-config-next: N/A
react: 18.2.0
react-dom: 18.2.0
typescript: 5.2.2
Next.js Config:
output: N/A
warn - Latest canary version not detected, detected: "13.5.6", newest: "14.0.5-canary.5".
Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
Read more - https://nextjs.org/docs/messages/opening-an-issue
Done in 1.62s.
I encountered the same issue today using 13.5.6. No matter what I did, nothing fixed the error. So I started building from scratch, and I rm -fr .next
, next build
it and next start
in each step below.
.next
node_modules
from the original (no issues here)So I don't know why and how the error is gone, but I do not see the TypeError: Cannot read properties of undefined (reading 'bind')
repeating in my log anymore...
I surely see this at 389 in node_modules/next/dist/server/base-server.js
though.
const origSetHeader = _res.setHeader.bind(_res);
I today had this happening locally and it drove me crazy. Then I realized I had a dev-instance of the app open in a tab, that tried to make websocket requests to the prod app, that doesn't support websockets. So.. false alert :sweat_smile:
I'm also facing same issue: ⨯ TypeError: Cannot read properties of undefined (reading 'bind') at NextNodeServer.handleRequestImpl
Node version: 20.10.0, 18.18.0 Next verson: 14.0.4 app-router
If you're using fallbacks on dynamic pages (i.e., pages like [componentId.jsx] or [componentIdNameDirectory]/index.jsx), set fallback to 'blocking'.
E.g.:
return {
fallback: 'blocking',
paths: meetups.map((meetup) => (
{ params: { meetupId: meetup._id.toString(),
}
}))
}
This should fix the issue.
I had this problem after upgrading to 14.1. It didn't happen in 13.4.2 before the upgrade. After deleting middleware.ts the error disappeared Is there any workaround?
@huozhi @ztanner @agustints I was able to reproduce the problem with minimal configuration Reproduce by starting locally and accessing localhost:3000/test https://github.com/yamatsum/nextjs-14.1-sample
@yamatsum you succeed with finding some solution? I have the same problem with next 14.0.4 and I don't know why
No, it's not resolved yet I'm having trouble updating
In my case, it's happened when i include socket.io and enable websocket. I have no idea to fix it.
after I've added
export const config = { matcher: [ '/((?!api|_next/static|_next/image|favicon.ico).*)', ], }
this bug disapiered on 14.1
In your reproduction @yamatsum, since you're using a multi-zone approach, when loading /test
the dev HMR websocket for web2
is being handled by your middleware in apps/web
rather than making it to the server it was intended for (apps/web2
). Updating your middleware matcher to exclude paths that correspond the basepath of the other server you're rewriting to (ie anything that starts with /test
) will fix the problem. Something like this:
// apps/web/middleware.ts
export const config = {
matcher: [
// Don't handle HMR requests for the dev server we rewrite to
"/((?!test/_next/webpack-hmr).*)",
],
};
Note: It's currently important that you use matcher
to exclude these paths, rather than skipping over them in the middleware handler itself.
When doing this, it will see that your middleware didn't handle the request, and move onto your rewrites which point the request to your other server.
If you're running into this issue but aren't running a multi-zone setup, then there's likely some other websocket upgrade request that is being handled by your middleware. As mentioned by some folks in earlier replies, make sure your middleware matchers are skipping over those routes so they can make it to the server they were intended for.
We should be able to detect this and handle it more gracefully on our side, so I can work on a fix for that. The above is a workaround in the meantime.
@ztanner Thank you for investigating! Will the problem be fixed soon?
Also, is it necessary to exclude webpack-hmr?
Hi @yamatsum -- currently yes, you need to exclude it. In a typical single-server setup, that single server handles webpack-hmr
requests, so they never make it to your middleware.
But because your first server is seeing an HMR request for a different server, it doesn't know what to do with it, so it's passing it on to middleware for your first server rather than letting it rewrite to your second server.
I don't have an ETA yet on a fix, I will try to look into it next week :)
@ztanner
But because your first server is seeing an HMR request for a different server, it doesn't know what to do with it, so it's passing it on to middleware for your first server rather than letting it rewrite to your second server.
Thank you for your investigation Did you understand anything?
In my case none of the above solutions worked
I just set the matcher where i want to run the middleware and it's working
export const config = {
matcher: ["/", "/register", "/dashboard/:path*"],
};
@ztanner have you had a chance to look into the issue yet? Thank you in advance.
@ztanner i tried every solutions here and export const config = { matcher: [ '/((?!api|_next/static|_next/image|favicon.ico).*)', ], } is working But when i turn on countries redirect based on next.js doc like below the redirect not working anymore. I really looking forward to fix this issue. Thank you.
`import { NextRequest, NextResponse } from 'next/server'
const PUBLIC_FILE = /.(.*)$/
export async function middleware(req: NextRequest) { const res = NextResponse.next() const acceptLanguage = req.headers.get('accept-language')
if (
req.nextUrl.pathname.startsWith('/_next') ||
req.nextUrl.pathname.includes('/api/') ||
PUBLIC_FILE.test(req.nextUrl.pathname)
) {
return
}
if (req.nextUrl.locale === 'default') {
let locale = 'tw'
if (acceptLanguage?.includes('zh-TW')) {
locale = 'tw'
} else if (acceptLanguage?.includes('zh-HK')) {
locale = 'tw'
} else if (acceptLanguage?.includes('zh-MO')) {
locale = 'tw'
} else if (acceptLanguage?.includes('zh-CN')) {
locale = 'cn'
} else if (acceptLanguage?.includes('zh')) {
locale = 'cn'
} else if (acceptLanguage?.includes('ja')) {
locale = 'jp'
} else if (acceptLanguage?.includes('ko')) {
locale = 'kr'
}
return NextResponse.redirect(
new URL(
`/${locale}${req.nextUrl.pathname}${req.nextUrl.search}`,
req.url
)
)
}
}`
Up
I today had this happening locally and it drove me crazy. Then I realized I had a dev-instance of the app open in a tab, that tried to make websocket requests to the prod app, that doesn't support websockets. So.. false alert 😅
This is the correct answer @VanCoding
I have encountered the same issue with "next": "14.2.3"
while using it with socket.io
.
The problem stems from the middleware. The only solution that worked for me was the one provided by @webmak. I replaced my matcher with the following:
export const config = {
matcher: [
'/((?!api|_next/static|_next/image|favicon.ico).*)',
],
}
The TypeError issue has been resolved, but unfortunately, a new error arises with clerck due to a discrepancy in the provided documentation. They suggest using a different match : matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
😵
@mstys Could not reproduce with the given link, please provide a valid repro. Thank you!
For the future readers, please take a look at the Middleware Matching Paths doc and ensure the config is set correctly.
Also, thank you @issam-seghir, @Siumauricio, @webmak and @smartinio for sharing your working matcher config!
The issue is likely due to a compatibility problem with the version of next-auth you are using. I resolved the issue by upgrading to the beta version of next-auth, which resolved the error related to the oidc-token-hash library. Here's what I did:
Upgrade next-auth to the Beta Version:
Run the following command to install the latest beta version of next-auth:
bash
npm install next-auth@beta
Verify canary release
Provide environment information
Which example does this report relate to?
https://github.com/vercel/next.js/blob/canary/examples/with-docker/README.md
What browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
No response
Describe the Bug
I getting following error on run next app after
npm run build
My middleware.ts from next.js docs.
PS. all works perfect without this middleware
Expected Behavior
Type error doesn't exists if using middleware.ts
To Reproduce
// add middleware.ts added above
NEXT-1739