Compiling too slow on next 9.4 #12797

ranjithkumar8352 · 2020-05-12T15:44:01Z

Maintainer update

Bug report

Describe the bug

Hello, I just upgraded next from 9.3 to 9.4 today. It seems that compiling a single page takes too long. More than 3 minutes. Sometimes it never compiles too.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

Install next 9.4
run next dev and start the server
Go to any page in localhost:3000
It takes a very long time to compile and even it compiles, the page never loads on browser sometimes.

Expected behavior

It should compile the page faster (usually 5 to 10 seconds) and load the page.

Screenshots

System information

OS: Windows
Version of Next.js: 9.4
Version of Node.js: 12.16.3

The text was updated successfully, but these errors were encountered:

Timer · 2020-05-12T15:59:55Z

Could you please give us a full reproduction? We'll need it to reproduce and track this down. 🙏

ranjithkumar8352 · 2020-05-12T16:04:59Z

@Timer Its a private codebase.
Here's the package.json

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "build:staging": "cross-env NEXT_PUBLIC_ENV=staging next build",
    "start": "next start -p 8081",
    "start:staging": "cross-env NEXT_PUBLIC_ENV=staging next start -p 8081"
  },
  "dependencies": {
    "@stripe/stripe-js": "^1.5.0",
    "@zeit/next-sass": "^1.0.1",
    "aws-amplify": "^3.0.8",
    "bulma": "^0.8.2",
    "graphql-tag": "^2.10.3",
    "mobx": "4.x",
    "mobx-react": "^6.2.2",
    "next": "^9.4.0",
    "node-fetch": "^2.6.0",
    "node-sass": "^4.13.1",
    "nookies": "^2.2.2",
    "nprogress": "^0.2.0",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native-web": "^0.12.2"
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/plugin-proposal-decorators": "^7.8.3",
    "@react-native-community/eslint-config": "^1.0.0",
    "babel-plugin-react-native-web": "^0.12.2",
    "cross-env": "^7.0.2",
    "eslint": "^6.8.0"
  }
}

It takes too long to compile even for a page with a single div. Can you tell me what other details should I share?

Timer · 2020-05-12T16:06:17Z

Sorry, but we'll need a full demo to provide any more insights. You can try to reduce your app to a single page without private data.

SelvinM · 2020-05-12T17:40:52Z

I'm having the same problem

s-kris · 2020-05-13T05:25:13Z

I'm having the same problem

Timer · 2020-05-13T05:27:16Z

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!

s-kris · 2020-05-13T06:09:31Z

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

Steps to reproduce:

Clone above repo && run yarn dev && go to localhost:3000.
Click on click here to go to test page.
Hit refresh button on browser.
Click back button on browser.
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

Timer · 2020-05-13T06:10:33Z

Thank you! We'll look at this soon.

ghost · 2020-05-14T06:02:12Z

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

timneutkens · 2020-05-14T18:52:43Z

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.

Timer · 2020-05-15T12:54:21Z

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

ranjithkumar8352 · 2020-05-15T15:37:14Z

@Timer It is resolved in next@9.4.1-canary.5 Thanks for the quick fix!

Timer · 2020-05-15T15:40:43Z

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.

ranjithkumar8352 · 2020-05-15T15:51:21Z

That's interesting!

s-kris · 2020-05-15T16:18:26Z

@Timer It's fixed now, thanks! But I'm on MacOS 10.15.4!

Timer · 2020-05-15T16:27:21Z

@s-kris the repo you posted was something else that's still a bug: #5598. There's an open version somewhere.

s-kris · 2020-05-15T16:33:52Z

Just checked #5598, interesting. On the first try it seemed to be fixed but I'll keep a track on this (not using nextjs currently for any active projects).

Timer · 2020-05-15T16:46:37Z

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

ghost · 2020-05-16T09:20:08Z

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

timneutkens · 2020-05-16T09:37:58Z

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

Profiling together with @sokra

mosesoak · 2020-07-17T16:46:12Z

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.

mosesoak · 2020-07-17T16:49:13Z

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! #14266

Timer · 2020-07-17T16:49:29Z

That is the correct issue to follow, @mosesoak!

mosesoak · 2020-07-17T17:01:19Z

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)

tom1mat · 2020-08-01T15:27:55Z

Hi guys! Firstly thank you for your awesome support always!! @Timer @timneutkens
I am having the same problem stated in the issue description in macOS Mojava 10.14.6.
I tried with next@9.4.1-canary.5 and the last next@9.5.1 and I'm still getting the loop.

Tested in Ubuntu and it works well.

Package Json:

{
  "name": "web-porpora",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start-dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@babel/polyfill": "^7.10.1",
    "@material-ui/core": "^4.10.2",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.56",
    "@sendgrid/mail": "^7.2.1",
    "@zeit/next-sass": "^1.0.1",
    "bcrypt": "^5.0.0",
    "classnames": "^2.2.6",
    "cookie": "^0.4.1",
    "debounce": "^1.2.0",
    "dotenv": "^8.2.0",
    "formidable": "^1.2.2",
    "formik": "^2.1.4",
    "js-cookie": "^2.2.1",
    "jsonwebtoken": "^8.5.1",
    "mysql": "^2.18.1",
    "next": "^9.5.1",
    "node-sass": "^4.14.1",
    "react": "16.13.1",
    "react-click-outside": "github:tj/react-click-outside",
    "react-dom": "16.13.1",
    "react-dropzone": "^11.0.2",
    "react-table": "^7.2.1",
    "s": "^1.0.0",
    "yup": "^0.29.1"
  },
  "devDependencies": {
    "@types/node": "^14.0.6",
    "@types/react": "^16.9.35",
    "@types/react-dom": "^16.9.8"
  }
}

next.config

const withSass = require('@zeit/next-sass')
module.exports = withSass({
  webpack: (config, { isServer }) => {
    // Fixes npm packages that depend on `fs` module
    if (!isServer) {
      config.node = {
        fs: 'empty'
      }
    }

    return config
  }
})

.babelrc

{
  "presets": [
    [
      "next/babel",
      {
        "preset-env": {},
        "transform-runtime": {},
        "styled-jsx": {},
        "class-properties": {}
      }
    ]
  ],
  "plugins": []
}

PrimeObjects · 2020-08-13T18:13:19Z

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

timneutkens · 2020-08-14T13:49:24Z

webpack-hmr is only an eventsource connection that stays open hence why the time keeps running, it's unrelated to webpack compilation times.

asdofindia · 2020-09-02T15:27:57Z

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.

seyedasfar · 2021-03-10T01:29:16Z

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.

but I'm using Ubuntu.

vgb0332 · 2021-03-16T03:35:37Z

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.

dailytravel · 2021-08-07T08:18:25Z

NextJS compile slow after I try test with pwa. You need clear data from application as the bellow to fix it!

erfanasbari · 2021-08-12T10:51:42Z

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.

CrispenGari · 2021-09-07T23:10:32Z

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.

SSylvain1989 · 2021-10-06T21:29:32Z

Hello same issue here im on mac m1 chip ... i have to close my chrome and reopen for fast compile ...

timneutkens · 2021-10-08T08:14:01Z

FYI I'm tracking a new thread here: #29559 (comment)

Timer added Type: Needs Investigation please add a complete reproduction The issue lacks information for further investigation labels May 12, 2020

Timer removed the please add a complete reproduction The issue lacks information for further investigation label May 13, 2020

Timer added this to the 9.4.1 milestone May 13, 2020

Timer mentioned this issue May 15, 2020

[Fast Refresh] Improve responsiveness on Windows #12909

Merged

Timer closed this as completed in #12909 May 15, 2020

pepsivontwist mentioned this issue May 25, 2020

Fast refresh is very slow #13335

Closed

jasonwilliams mentioned this issue Dec 9, 2020

SourceMaps don't bind on latest next.js version server side (Docker) microsoft/vscode-js-debug#854

Closed

stevensturkop mentioned this issue Oct 2, 2021

NextJs compiling extremely slow #29559

Closed

vercel locked and limited conversation to collaborators Oct 8, 2021

Compiling too slow on next 9.4 #12797

Compiling too slow on next 9.4 #12797

Comments

ranjithkumar8352 commented May 12, 2020 • edited by timneutkens

Maintainer update

Bug report

Describe the bug

To Reproduce

Expected behavior

Screenshots

System information

Timer commented May 12, 2020

ranjithkumar8352 commented May 12, 2020

Timer commented May 12, 2020

SelvinM commented May 12, 2020

s-kris commented May 13, 2020

Timer commented May 13, 2020

s-kris commented May 13, 2020

Timer commented May 13, 2020

ghost commented May 14, 2020

timneutkens commented May 14, 2020

Timer commented May 15, 2020

ranjithkumar8352 commented May 15, 2020

Timer commented May 15, 2020 • edited

ranjithkumar8352 commented May 15, 2020

s-kris commented May 15, 2020

Timer commented May 15, 2020 • edited

s-kris commented May 15, 2020

Timer commented May 15, 2020

ghost commented May 16, 2020

timneutkens commented May 16, 2020

mosesoak commented Jul 17, 2020

mosesoak commented Jul 17, 2020

Timer commented Jul 17, 2020

mosesoak commented Jul 17, 2020 • edited

tom1mat commented Aug 1, 2020 • edited

PrimeObjects commented Aug 13, 2020 • edited

timneutkens commented Aug 14, 2020

asdofindia commented Sep 2, 2020

seyedasfar commented Mar 10, 2021

vgb0332 commented Mar 16, 2021

dailytravel commented Aug 7, 2021

erfanasbari commented Aug 12, 2021 • edited

CrispenGari commented Sep 7, 2021

SSylvain1989 commented Oct 6, 2021

timneutkens commented Oct 8, 2021

ranjithkumar8352 commented May 12, 2020 •

edited by timneutkens

Timer commented May 15, 2020 •

edited

Timer commented May 15, 2020 •

edited

mosesoak commented Jul 17, 2020 •

edited

tom1mat commented Aug 1, 2020 •

edited

PrimeObjects commented Aug 13, 2020 •

edited

erfanasbari commented Aug 12, 2021 •

edited