NextJS, middleware ( hostname is undefined) + random string (server-side)

[wallabyjs]

NextJS, middleware ( hostname is undefined) + random string (server-side)

[thepuzzlemaster]

I think I just ran into the same thing in my NextJS app, but slightly different.

Took like 3 hours to realize it was coming from console ninja. 🤦

My situation is that whenever I'd add a console.log() to my front-end code (so not related to NextJs Middleware), I would get a nextjs error
TypeError <Some random import> is not a function

error - TypeError: (0 , _store.useAppDispatch) is not a function
    at Root (webpack-internal:///./src/features/Root/Root.tsx:41:48)
    at processChild (/Users/ilanlappy/Projects/myProject/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
    at resolve (/Users/ilanlappy/Projects/myProject/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (/Users/ilanlappy/Projects/myProject/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (/Users/ilanlappy/Projects/myProject/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at Object.renderToString (/Users/ilanlappy/Projects/myProject/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
    at Object.renderPage (/Users/ilanlappy/Projects/myProject/node_modules/next/dist/server/render.js:680:46)
    at Object.defaultGetInitialProps (/Users/ilanlappy/Projects/myProject/node_modules/next/dist/server/render.js:350:67)
    at Function.getInitialProps (webpack-internal:///./node_modules/next/dist/pages/_document.js:19:20)
    at Object.<anonymous> (/Users/ilanlappy/Projects/myProject/node_modules/next/dist/shared/lib/utils.js:75:33) {
  page: '/booking-details/[bookingId]'
}
  31 | 
  32 | function Root(props: { children: React.ReactElement }): JSX.Element {
> 33 |   const dispatch = useAppDispatch()
     |                                 ^
  34 |   const [globalPointerDownOutsideListener, setGlobalPointerDownOutsideListener] =
  35 |     React.useState<GlobalPointerDownOutsideListener | null>(null)
  36 |   const router = useRouter()

The error seemed completely unrelated to the actual import. And if I remove that import, it would instead trigger the error on a different import.

Seems to have gone away after disabling console ninja. Although it took some fiddling before it actually stopped reoccurring.

[smcenlly]

@FlorentinoG9 @thepuzzlemaster - are you able to provide us with steps to reproduce?

Could you also please let us know what node.js version you are using as well as your package.json dependency versions?

[FlorentinoG9]

@thepuzzlemaster it took me 5h to find out it was the extension

@smcenlly

I'm using nvm with node v16.18.1
NextJs v12.2.0 (stable middleware)
Next-Auth 10.4.3

I was trying to add tRPC onto the project and it was working ok even with the log in the middleware, I decided to migrate to TS the whole project bit by bit, and when I changed the middleware to TS. that's when it started crashing my terminal.

after branching 1 change at a time and comment/uncomment code I figured that the issue was caused by the console.log()
so I knew it was something about it, but I don't have anything in the middleware just prints that log and some userID which I get from the session and cookies

I'm also using some dynamic api calls but not sure if those are related

I will provide further steps if I get the error again

the Error on the browser was a Typeerror: cannot read properties of undefined (reading 'hostname')

and on the terminal, it was showing a long random string like 500 - 1000 random words with random characters

[FlorentinoG9]

@smcenlly
this happens without adding TS or tRPC to the project, yesterday it was working fine and this morning when I started the project again it happened out of the box no changes were made since last night and it was working fine (no issues)

this is the error of the terminal and an image of some part of the string

error - uncaughtException: TypeError: _0x148764.startsWith is not a function    at od (c:\Users\[UserName]\.vscode\extensions\wallabyjs.console-ninja-0.0.28\out\buildHook\index.js:1:2098790)    at Object.lstat (c:\Users\[USERNAME]\.vscode\extensions\wallabyjs.console-ninja-0.0.28\out\buildHook\index.js:1:2103567)    at lstat (node:fs:1487:11)    at _rimraf (node:internal/fs/rimraf:68:3)    at rimraf (node:internal/fs/rimraf:47:3)    at node:internal/fs/rimraf:146:7    at Array.forEach (<anonymous>)    at node:internal/fs/rimraf:143:5    at FSReqCallback.oncomplete (node:fs:192:23)   

DynamicCodeEvaluationWarning: Dynamic Code Evaluation (e. g. 'eval', 'new Function') not allowed in Middleware "./src/middleware"

[ArtemGovorov]

@FlorentinoG9 Thanks for providing the details. The issue (app crash when using console.log in middleware) should be fixed in the new v0.0.30 of the extension. Please note however that due to the limitations of the next.js middleware allowed code, console ninja will not be able to display console.log from the middleware file, but logs from pages/routes/api/etc. are supported.