WebSocket connection to 'ws://localhost:3000/_next/webpack-hmr' failed: init @ websocket.js?a9be:46

[slemac]

What example does this report relate to?

GetServerSideProps axios and return notFound: true,

What version of Next.js are you using?

12.0.10

What version of Node.js are you using?

16.13.0

What browser are you using?

Chrome

What operating system are you using?

Windows

How are you deploying your application?

next dev

Describe the Bug

On the client side, in the browser it shows me the following error repeatedly without stopping:
WebSocket connection to 'ws://localhost:3093/_next/webpack-hmr' failed:
init @ websocket.js?a9be:46

and in the powershell it shows me the following message repeatedly without stopping:
Error: Request failed with status code 404
at createError (C:\Users\slema\source\repos\upfuller-client\node_modules\axios\lib\core\createError.js:16:15)
at settle (C:\Users\slema\source\repos\upfuller-client\node_modules\axios\lib\core\settle.js:17:12)
at IncomingMessage.handleStreamEnd (C:\Users\slema\source\repos\upfuller-client\node_modules\axios\lib\adapters\http.js:322:11)
at IncomingMessage.emit (node:events:402:35)
at IncomingMessage.emit (node:domain:475:12)
at endReadableNT (node:internal/streams/readable:1343:12)
at processTicksAndRejections (node:internal/process/task_queues:83:21)

Expected Behavior

that errors are not repeated many times. It seems that it enters an infinite loop of errors

To Reproduce

1. create a project with npx create-next-app@latest --ts
2. in page/index.tsx is added getServerSideProps:
   export const getServerSideProps: GetServerSideProps = async ({ params, res, locale, }) => { try { const { data } = await axios.get( "https://jsonplaceholder.typicode.com/todos/sppsppspsps" ); console.log(data); return { props: { ...data }, }; } catch (error: any) { res.statusCode = 404; console.log(error); console.log("error"); return { notFound: true, props: {}, }; } };
3. run next dev and access to http://localhost:300/
   
   
   

Repository:
https://github.com/slemac/my-app-2

[balazsorban44]

Thank you, I could reproduce it with this simplified code:

//pages/index.js
const Home = () => null
export default Home

export function getServerSideProps() {
  console.log("called")
  return { notFound: true }
}

Two small notes in the meantime, when returning notFound: true, you should not need to return props also, and res.statusCode = 404 is also unnecessary as returning notFound already indicates it.

See https://nextjs.org/docs/api-reference/data-fetching/get-server-side-props#notfound

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.