For those curious, this was caused by Windows Defender. Windows Defender was delaying the HMR (to do a scan) because our emitted JavaScript files contained the word eval! That’s why macOS was unaffected.

Hi everyone!

Replying with "+1"s do not help us prioritize this issue any quicker. If you’d like us to fix this problem, please provide a reproducible demo.

Thanks!

Hey @Timer, Here it is: https://github.com/s-kris/loading-test

Steps to reproduce:

1. Clone above repo && run yarn dev && go to localhost:3000.
2. Click on click here to go to test page.
3. Hit refresh button on browser.
4. Click back button on browser.
5. Repeat steps 2, 3 & 4. Hit refresh. You can see that page loads forever. Closing the tab and loading localhost:3000 doesn’t fix either.

Video: https://www.youtube.com/watch?v=orS_6SbEafc

Cool thanks. Just found out from a very smart friend that you can fix the issue more cleanly by leaving Defender turned on but setting your project folder as an Exception:

(Scroll down on the Virus & threat protection settings page to find this)

Add:

• Folder: your main projects folder
• Process: node
• Process: wslhost.exe (if you use WSL)

Thank you! We’ll look at this soon.

I’m having the same problem

I’ve tried all these mentioned methods none of them worked on my situation. Developing in nextjs is becoming a pain. Can you guys improve this on windows we are suffering and its stressful spending half of a day staring on the browser waiting for the code to compile only to find out that you have an error. Im coming beck to nextjs when this bug is fixed, for now let me use gasty and react.

We’re planning on fixing it as part of webpack 5, which is coming 🔜!

Thanks @Timer I’m having the same issue here with a very small project too…

Wow, this issue saved me a headache, thank you @Timer!!! It looks like HMR was disabled by Windows Defender: when on, Next was doing a full rebuild / page refresh, ~20 seconds vs ~1 second. Huge diff.

Here’s where you turn it off: click the Manage Settings link in Settings > Security > Virus & Threat Protection. Note that it says it will turn itself back on after some amount of time. Anyone know how to configure it? I dug around in Control Panel and couldn’t find anything.

Thanks @Timer I’m having the same issue here with a very small project too…

@mahmoudm-mvsi, As said by @Timer:

Replying with "+1"s do not help us prioritize this issue any quicker. If you’d like us to fix this problem, please provide a reproducible demo.

Your comment does not add to this issue and is the equivalent to saying +1. Please use GitHub’s emoji reactions if you want to “+1” an issue.

Wondering if this issue might be key to fixing this? Obviously we don’t want to have to disable security on our machine just to use Next! https://github.com/vercel/next.js/issues/14266

Could everyone please try next@9.4.1-canary.5 and see if that resolves their speed issue?

My project took around 30sec for a page to compile and it took around 10 seconds for hot reloading, also the ram usage was very high (4 Gb on mac) and after a while I ran into Javascript heap out of memory and I had to restart the dev server. I tried a lot of methods but it wasn’t working. I analyzed the bundle using @next/bundle-analyzer and I saw react-icons was the largest package that was being parsed. So I went to react-icons NPM page and saw this:

If your project grows in size, this option is available. This method has the trade-off that it takes a long time to install the package.

yarn add @react-icons/all-files
# or
npm install @react-icons/all-files --save

Example usage:

import { FaBeer } from "@react-icons/all-files/fa/FaBeer";
class Question extends React.Component {
  render() {
    return <h3> Lets go for a <FaBeer />? </h3>
  }
}

So I did that and the ram usage decreased by 3 Gb and the compile time decreased as well and now everything is ok. Note: you can apply the same method for other libraries like @material-ui/icons

My project was ok on react and I don’t know why next has some problems with importing a single value from a large module.

Everyone I’ve been having the exact same issue for a long time and tried every possible solution I could find on the internet. And I finally found an answer to my case. i hope it helps some people with similar problems.

My project uses quill, ckeditor, less, ant design for third libraries and had to configure next.config.js for them. I figured their configurations require massive amount of regex check which have caused the slow build issue(even heap out of memory issue).

I haven’t been able to find an alternative to fasten things up with these configuration. But my recommendation is for ‘dev’ environment slash these configuration setting unless really important or necessary.

I just want to add a comment here although it is definitely not the problem that others faced.

I was having slow compilation time on Ubuntu. The problem was that I had graalvm installed and the “node” binary that was getting executed was the one provided by graalvm. Removing that from the $PATH solved the issue.

This might help someone.

“next”: “9.5.2” Got the same slow, and the webpack took around 30 s

For those curious, this was caused by Windows Defender. Windows Defender was delaying the HMR (to do a scan) because our emitted JavaScript files contained the word eval! That’s why macOS was unaffected.

I’m really curious to know how did you find out about that! lol