Why does it compile twice? (second time always much slower)

[peterbe]

Seeing this:

info  - Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled
event - compiled client and server successfully in 964 ms (507 modules)
wait  - compiling...
info  - Using experimental wasm build of next-swc
warn  - Attempted to load @next/swc-darwin-x64, but it was not installed
event - compiled client and server successfully in 43.1s (507 modules)

...when starting up with npm run dev. (we run Next within an Express app)

In particular, why are there 2 lines of...

event - compiled client and server successfully in 964 ms (507 modules)

and

event - compiled client and server successfully in 43.1s (507 modules)

It's a bit of a concern of ours that it's taking 43.1s seconds for the second one which might be a mixture of upgrading to 12.2.5 from 12.2.4 but I also very much suspect one of your pages/**/*.tsx files does something crazy when it drags in some Node import which is needed by the getServerSideProps.

[peterbe]

Incidentally, I noticed in another (very vanilla use of NextJS) it says so twice there too:

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 2.3s (2967 modules)
wait  - compiling...
event - compiled client and server successfully in 345 ms (2967 modules)

[Tsouef]

Same problem for me. Compiling is now very slow the second time since the 12.2.5.

I have no problem with 12.2.4.

Any idea ?

[sebastienbarre]

I noticed the exact same thing running dev now. I upgraded from 12.1.5 to 12.2.5, I now see two " compiled client and server successfully", the second one much MUCH slower than the first -- we are talking more than x50 to x100 times slower, almost 2 minutes, my build takes only about 7 seconds in comparison.

This is on MacOS 12.3.1 (Monterey) with a MacBook Pro (16-inch, 2021) M1 Max.

event - compiled client and server successfully in 241 ms (193 modules)
wait  - compiling...
event - compiled client and server successfully in 113s (193 modules)

Seems to have been reported in Compilation time extremely slow (Next > 12.0.9) · Issue #38590 · vercel/next.js as well.

UPDATE: I downgraded and locked to 12.2.4 and this slowdown is gone, so this "issue" seems to have been introduced in 12.2.5

[jeremieP]

Same issue for me

I tried to understand why, but no real clues.
I ran my dev server on a M1 Pro Mac.

Will try it on Linux tomorrow.

[Tsouef]

We work on a different mac in my company and only MAC with M1 have problems

[jeremieP]

Very weird, We work on different mac too, and we had the same problem on :

• Macbook w/ M1
• Macbook w/ M1 Pro
• Macbook w/ I5 intel chipset (less impacted, but compiled twice with x4 factor)

Will try it on Linux today.

[sebastienbarre]

I just tested v12.3.0 and sadly, this is even worse now, because running dev no longer shows the huge (almost 2 minutes for me) pause between events, but it's very much still there. For reference, running build takes about 8 seconds.

event - compiled client and server successfully in 1286 ms (194 modules)
> Ready on http://localhost:3000

The huge pause occurs (for me) in between these 2 lines above. There is no longer a second Event - compiled client and server successfully in 113s which was actually timing the big slowdown (see my comment above). So essentially I am left dangling without any feedback for about 1 or 2 minutes.

[jeremieP]

Hi @sebastienbarre

Maybe we found something. We have a big repo', with lot of files and directories.

Recently, a change was introduced to watch more files for hot reloading (.env files at least ^^) (This PR)

We tried to patch to not watch all directories with this :

diff --git a/node_modules/next/dist/server/dev/next-dev-server.js b/node_modules/next/dist/server/dev/next-dev-server.js
index 42a8eab..1e722f2 100644
--- a/node_modules/next/dist/server/dev/next-dev-server.js
+++ b/node_modules/next/dist/server/dev/next-dev-server.js
@@ -194,9 +194,7 @@ class DevServer extends _nextServer.default {
             ];
             files1.push(...tsconfigPaths);
             wp.watch({
-                directories: [
-                    this.dir
-                ],
+                directories,
                 startTime: 0
             });
             const fileWatchTimes = new Map();

Do you want to try it ?

It seems better for us (We only checked the start time, not the other effects for now :))

Maybe we could imagine adding some paths to exclude inside the next.config.js file

[sebastienbarre]

Thanks @jeremieP -- this is EXACTLY the problem, and it makes total sense. We have a directory with 3,000 files that apparently it started to watch. What a strange decision this PR made.

So how can we surface this issue to the NextJS people?

[peterbe]

Anybody know some magical DEBUG:... prefix env var to get insight into the files it watches?

What a strange decision this PR made.
...and...
So how can we surface this issue to the NextJS people?

Perhaps that diff there can be git blamed back to the commit it was part of and perhaps that way we can retrace the PR it originally came from. Those people involved in that might understand this Discussion better.

[sebastienbarre]

I'm on it. I've added a comment to the original PR here. Feel free to share your experience as well.

Update: consider watching #40412 progress (I'm not sure I understand the current fix).

[jeremieP]

A potential fix has been merged :)

#40412

Will try the new canary when published :)