[Feature request] Show build output/progress

[Pixelatex]

When starting the next build, nothing is shown for a good amount of time. This has caused several misunderstandings with newer developers and is fairly annoying to have no idea how much longer your build will take.

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

I would expect something in the next.config like showBuildOutput: true that will show some indication of how far along the build is in the terminal or even a progress bar.

Current Behavior

Currently, you're staring at a nonchanging terminal window for a few minutes if the build takes a while.

Context

This could be considered a quality of life improvement but is something that I personally would expect to be a fundemental feature of any build.

[Stefavag88]

How long is the build supposed to take ?
When i run "npm run build" it gets stuck on:

Using external babel configuration
Location: "C:\Users[My User]\Desktop\WorkSpace[ProjectDirectory].babelrc"

I have not waited for more than 15 minutes, but it seems that something is wrong. Should i just wait more or is there a problem with my config?

[Pixelatex]

I'd wager something is wrong with your babel config. Have you tried running it without the external config?

[bensalilijames]

I had a similar problem where sometimes next build would carry on forever as described above, and sometimes it would build all fine (notably using the exact same code).

After increasing the RAM on the (Heroku) server it builds on, it hasn't failed again.

I spent a long time looking for anything that might help debug this issue, but ultimately gave up as I couldn't reproduce it locally and there weren't any tools I could find that report progress on a webpack build. Having some sort of progress would be super useful! 🙂

[lucleray]

You can use webpackbar in the webpack config to show a progress bar.

I made a tiny plugin to do that : https://github.com/lucleray/next-progressbar

[ManotLuijiu]

How to use next-progressbar together with next-sass

[timneutkens]

How to use next-progressbar together with next-sass

webpackbar is included in Next.js since v7.

With relation to build output, this is landing in stable soon: #5664

[james-wallis]

@timneutkens I don't have any build output showing when I run next build.
All I have is

[13:18:54] Compiling client
[13:18:54] Compiling server

until the build either passes or fails which is causing my Travis build to fail as it doesn't see any output.
Running Next.js version 7.0.2 with the only plugin being next-optimized-imagse.
Do I have to enable some additional parameter to see the progress bar on build or is something broken?

[tnunes]

Same here, was doing some bundle optimisation and looking for a feature like this. Any config option we need to use or was this disabled in the meantime?

[vernak2539]

I've been trying to upgrade to next v8 and the progress bars don't seem to be included. Are there plans for this?

[MicroBenz]

@vernak2539 I have the same issue as yours. I've updated next to v8 at first the progress bar shown as normal and then it just disappears. And now it's completely nothing in the terminal.

[Timer]

The progress bar caused significant build performance degradation, so we decided to remove it.

You're free to inject this plugin back if you'd like!

[Nelrohd]

A bit linked with this ticket and not sure if it's normal before creating an issue but I'm using express server + nextjs v8 (basic setup) and I get this:

[ event ] build page: /
[ wait ]  compiling ...
[ event ] build page: /signup
[ wait ]  compiling ...
[ event ] build page: /login
[ wait ]  compiling ...

It seems weird that it's always compiling and not showing done. Is this a bug or a feature?

[novellito]

@Nelrohd Did you end up finding an answer to the compiling issue? My app works fine but the fact that it doesn't "finish" is driving me crazy!

[landsman]

Is there some verbose argument?

[abhishekasana]

@james-wallis
You can try using webpackbar,
add the following config in next config,

//next.config.js
module.exports = ({
  webpack: (config) => {
    config.plugins.push(new WebpackBar({
      fancy: true,
      profile: true,
      basic: false,
    }));

    return config;
  }
})

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.