Help with error using redis on middleware - (middleware)/node_modules/redis-errors/index.js (3:0) @ <unknown>

[ericchaves]

Summary

HI folks, I'm new to NextJS and I'm facing an error that I can't figure out the reason behind it. I believe I'm misunderstanding how NextJs uses middlewares on server side.

In short, I have a middleware that should execute on my nextjs server for every Page or API request (I'm not using the middleware on the edge ). It needs to recover some application configurations cached on redis and perform some security validations (like evaluate captcha score, check user data on session storage, etc), therefore my middleware import redis module.

When I start the development server, I got a console error messsage because complaingin that redis-error (a dependency of ioredis) is breaking. I tracked the error and indeed this lib checks the value process.version and somehow this value does not seem to be set, hence raising the exception.

Now here is what I don't get:

1. why is this error being raised on the front-end if it's happening on the middleware?
2. why is the middleware not being abble to see the process.version value, since it is setted?
3. the middleware does not seems to hit my breakpoints on vscode (my debug configuration works ok for Pages, Components, etc, both front-end and server side, only the middleware does not seem to be "activated" by the debugger)

so I'm under the impression that I'm missing something here in regards to how middleware can be used.

Someone can give me some help or directions? what am I missing?

Additional information

My application uses nextjs version 12.3.1. 
My middleware uses the matcher below:

export const config = {
  matcher: [ "/((?!_next/static|_next/image|favicon.ico).*)" ],
}

Once the development server starts, the console show the error:

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 434 ms (186 modules)
...
wait  - compiling /src/middleware (client and server)...
event - compiled successfully in 1049 ms (871 modules)
wait  - compiling /_error (client and server)...
error - (middleware)/node_modules/redis-errors/index.js (3:0) @ <unknown>
error - Cannot read properties of undefined (reading 'charCodeAt')
null
event - compiled client and server successfully in 121 ms (187 modules)

the browser opens up but immediatly breaks with error:

Server Error
TypeError: Cannot read properties of undefined (reading 'charCodeAt')

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>
(middleware)/node_modules/redis-errors/index.js (3:0)
eval
(middleware)/node_modules/redis-errors/index.js (3:0)
(middleware)/./node_modules/redis-errors/index.js
evalmachine.<anonymous> (8797:1)
__webpack_require__
evalmachine.<anonymous> (37:33)
fn
evalmachine.<anonymous> (281:21)
eval
(middleware)/node_modules/ioredis/built/cluster/index.js (5:23)
(middleware)/./node_modules/ioredis/built/cluster/index.js
evalmachine.<anonymous> (8084:1)
__webpack_require__
evalmachine.<anonymous> (37:33)
fn
evalmachine.<anonymous> (281:21)
eval
(middleware)/node_modules/ioredis/built/Redis.js (6:18)
(middleware)/./node_modules/ioredis/built/Redis.js
evalmachine.<anonymous> (7985:1)

### Example

_No response_

[sarzixon]

@ericchaves I'm getting the same error. Have you found a solution?

[ericchaves]

@sarzixon apparently middlewares in next were designed to run exclusively on edge functions (functions executed at the CDN instead of on application server) and therefore it assumes a reduced environment (Vercel Edge Runtime), not a full nodejs environment. Hence libs like redis and others won't work due to the lack of classes present on this environment. For example in my case I'm using ioredis which when loaded trys to access the process class which is not present.

My guess is that when we execute the middleware on the server, during development, nextjs runs the middleware on a "simulated" or local Edge Runtime environment.

The break point activation issue I solved upgrading to the latest nextjs version. It was related to the lack of some source maps due to multiple transpilations made from the TypeScript code (in my case) up to to the final JS .

[AndonMitev]

damn hitting exact same issue :X

[jiaweing]

Same issue here using in middleware

[ManjurSk]

this somehow solved the problem, but you have the access to hit the url from outside. This is not secure.

[jiaweing]

How will this be abused?

[yuiidev]

Having to resort to an extra roundtrip for something like this is kind of ridiculous, though.

[tremby]

I've been using this workaround for months and I've strongly disliked it from the start. It's such a horrible kludge.

What's more, I found today while debugging a bizarre caching issue that it also somehow messes up Next's fetch caching -- any fetches which happen in the same request after the middleware don't follow the caching configuration properly. They don't pay attention to hard refreshes, and they don't revalidate when a revalidate() call for their tag has occurred. I can see this issue disappear and reappear just by commenting out and uncommenting my middleware's fetch.

[coredevel]

Also running into this issue today trying to use next-app-session library. What a PITA