[NEXT-1119] Socket.IO Not working anymore from Next.js 13.2.5-canary.27 to latest Next.js 13.4.1
Problem
Verify canary release - [X] I verified that the issue exists in the latest Next.js canary release Provide environment information [code block] Which area(s) of Next.js are affected? (leave empty if unsure) App directory (appDir: true) Link to the code that reproduces this issue https://codesandbox.io/p/sandbox/nextjs-socketio-u89y82?file=%2Fpackage.json&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A4%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A4%7D%5D To Reproduce Agenda of this project? - To setup the Socket.Io server and share the information from one client to another user socket.io events The App is have the following things - - An api for initialising the Socket.Io server - inside /pages/api/socketio - A client page to connect to this server - inside /app/page Whats the Issue? - There has been an unknown error in network connection from client side when its trying to create the Socket.Io connection. Since when this issue is happening? - This has been happening from Next.js version 13.2.5-canary.27 version and its still happening even in latest canary release 13.4.1-canary.2 and also the latest release Next.js 13.4.1 Do we have an Example project? - Yes, I have created a testing project in codesandbox, that I have already shared. (Link) Steps to Reproduce - Just see the console and network tabs for the client connection error. It will happen to all the versions on and above 13.2.5-canary.27 - And to see if its fixed, you need to downgra
Error Output
error in network connection from client side when its trying to create the Socket.Io connection.
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Solution: [NEXT-1119] Socket.IO Not working anymore from Next.js 13.2.5-canary.27 to latest Next.js 13.4.1
It appears that after "13.2.5-canary.26", a trailing slash is appended to the end of the route. Disabling "addTrailingSlash" in the Socket.IO Server constructor resolved this for me on the latest version (13.4.1). [code block]
Trust Score
6 verifications
- 1
It appears that after "13.2.5-canary.26", a trailing slash is appended to the en
It appears that after "13.2.5-canary.26", a trailing slash is appended to the end of the route.
- 2
Disabling "addTrailingSlash" in the Socket.IO Server constructor resolved this f
Disabling "addTrailingSlash" in the Socket.IO Server constructor resolved this for me on the latest version (13.4.1).
Validation
Resolved in vercel/next.js GitHub issue #49334. Community reactions: 22 upvotes.
Verification Summary
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep