Next.js: Yarn 2: 404 page does not load

[jonaskuske]

Bug report

Describe the bug

When running next using Yarn 2 and visiting a page in the browser that doesn't exist, the 404 error page never shows up. Instead it loads forever ("waiting on localhost...") and then eventually errors with ERR_EMPTY_RESPONSE.

But the terminal shows that the page was compiled:

[ event ] build page: /next/dist/pages/_error
[ wait ]  compiling ...
[ ready ] compiled successfully - ready on http://localhost:3000

To Reproduce

I added a repro here – simply clone and run npm start, dependencies and yarn itself are included

In the terminal:

> mkdir repro
> cd repro
> yarn init -i 2
> yarn add next react react-dom
> mkdir pages
> yarn next

Then open localhost:3000 in the browser.

Expected behavior

The browser receives a response and the 404 page is shown.

System information

• OS: Windows 10 and Ubuntu 16.04 (within Windows Subsystem for Linux 2)
• Browser (if applies): Edge 80, probably all others too
• Version of Next.js: 9.3.3

[femialaka]

I want to work on this issue can you give me some guidelines please, thanks in advance

[yellowspaceboots]

A temporary fix is to create a custom _error.js and 404.js in /pages as described here. I was having this same issue where the automatically generated error page from next would not get built correctly using Yarn 2. Once I created my own custom files in /pages it all works with no errors in console. I know it's not a true fix but it should work until a true fix is found. Hope this helps!

[chabou]

I worked on it and found some explanations but I am not sure how to really fix it.

onDemandEntries is responsible to create the file on the fly .next/static/development/pages/next/dist/pages/_error.js
I don't know exactly why it doesn't use static/development/pages/_error.js.
The path is set here:
https://github.com/zeit/next.js/blob/55ffb96a36e9ba61f0e4f556274562f850ab31fb/packages/next/server/on-demand-entry-handler.ts#L283-L286

Due to yarn2, Next fails to generate it. (I don't know exactly why, maybe it depends on node_modules ?)
When it fails to find it, the entry is silently deleted from the entries to compile. Because it is assumed that it occurs only if the file has been deleted;
https://github.com/zeit/next.js/blob/55ffb96a36e9ba61f0e4f556274562f850ab31fb/packages/next/server/on-demand-entry-handler.ts#L82-L87

Then the entry is ignored and the handler is not called through the missing call to doneCallbacks!.emit(page):
https://github.com/zeit/next.js/blob/55ffb96a36e9ba61f0e4f556274562f850ab31fb/packages/next/server/on-demand-entry-handler.ts#L163-L181

Finally, the promise in ensurePage is not resolved/rejected (because the callback is not called) and the server request is stuck: https://github.com/zeit/next.js/blob/55ffb96a36e9ba61f0e4f556274562f850ab31fb/packages/next/server/on-demand-entry-handler.ts#L308-L337

So I have some questions:

• Do you know why the path of _error.js is .next/static/development/pages/next/dist/pages/_error.js?
• Should we add a warning and trigger doneCallbacks!.emit(page) even when the entry is missing? here

Really happy to help.

[Timer]

We now have E2E tests for Yarn 2 and it should be working smoothly!