Next.js: Build time very long and never finishing.

[markolofsen]

Bug report

Describe the bug

Build time very long and never finishing. At localhost (Mac OS) everything ok, but in Ubuntu troubles. Also, builded project working in a both system.

To Reproduce

{
  "name": "DEMO",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "engines": {
    "npm": "6.1.0",
    "node": "9.5.0"
  },
  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js -p 7001",
    "port": "next start -p $PORT"
  },
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@material-ui/core": "^1.5.1",
    "@material-ui/icons": "^1.0.0-beta.43",
    "@material-ui/lab": "^3.0.0-alpha.13",
    "avataaars": "^1.1.0",
    "axios": "^0.18.0",
    "classnames": "^2.2.6",
    "express": "4.16.2",
    "i18next": "10.4.1",
    "i18next-browser-languagedetector": "2.1.0",
    "i18next-express-middleware": "1.0.10",
    "i18next-node-fs-backend": "1.0.0",
    "i18next-node-remote-backend": "^1.0.0",
    "i18next-xhr-backend": "1.5.1",
    "isomorphic-unfetch": "^2.0.0",
    "jss": "^9.8.1",
    "lodash": "^4.17.10",
    "mobx": "^4.2.1",
    "mobx-react": "^5.1.2",
    "moment": "^2.22.2",
    "next": "^6.1.1",
    "next-routes": "^1.4.2",
    "nprogress": "^0.2.0",
    "prop-types": "^15.6.2",
    "prop-types-exact": "^1.1.1",
    "react": "16.3.0-rc.0",
    "react-bottom-scroll-listener": "^1.3.0",
    "react-copy-to-clipboard": "^5.0.1",
    "react-countdown-now": "^1.3.0",
    "react-device-detect": "^1.5.8",
    "react-dom": "16.3.2",
    "react-fontawesome": "^1.6.1",
    "react-helmet": "^5.2.0",
    "react-i18next": "7.3.6",
    "react-jss": "^8.4.0",
    "react-moment-proptypes": "^1.6.0",
    "react-number-format": "^3.4.2",
    "react-page-visibility": "^3.0.0",
    "react-phone-number-input": "^2.1.2",
    "react-rating": "^1.3.0",
    "react-redux": "^5.0.7",
    "react-share": "^2.3.1",
    "react-stickynode": "^2.0.1",
    "react-timeago": "^4.1.9",
    "react-timeout": "^1.1.1",
    "react-vis": "^1.10.7",
    "redux": "^4.0.0",
    "remove": "^0.1.5"
  },
  "devDependencies": {
    "@babel/runtime": "^7.0.0",
    "@babel/plugin-transform-react-jsx-source": "^7.0.0-beta.52",
    "babel-plugin-module-resolver": "*",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "*",
    "babel-preset-stage-0": "^6.24.1",
    "cross-env": "^5.1.4",
    "styled-jsx-css-loader": "^0.3.0",
    "styled-jsx-plugin-sass": "^0.2.2",
    "webpack": "^4.17.2"
  }
}

Example command line

$ npm run build
> Using external babel configuration
> Location: "/home/admin/web/demo.com/public_html/.babelrc"

System information

• OS: masOS, Ubuntu 16.04
• Version of Next.js: 6.1.1

[timneutkens]

This issue is not actionable. But try next@canary. It might be fixed there.

To further elaborate why this is not actionable I'll outline the steps provided:

• Copy + paste the package.json
• I guess run yarn
• Run yarn build / npm run build

What will happen if you follow these steps is that Next.js will tell:
"there's no pages directory"

From observing your console output you have a custom .babelrc too.

Please always provide a full reproduction (and possibly minimal, but a full reproduction would do) when creating issues in any open-source project as otherwise, it's really hard for maintainers to help you 🙏

[markolofsen]

@timneutkens with next@canary my project fall down. I tried to launch with yarn — the same error. yarn dev working properly, yarn build - infinity (if Ubuntu).
Node version between my localhost (mac) and ubuntu (server) - the same too

[athomaj]

I've got the same problem for the same configuration

[timneutkens]

I'm basically going to repeat what I posted earlier:

Please always provide a full reproduction (and possibly minimal, but a full reproduction would do) when creating issues in any open-source project as otherwise, it's really hard for maintainers to help you 🙏

[markolofsen]

Solution was found!!! Just remove folder node_modules and after that use only yarn package manager.

[lstrive-yn]

why does npm package manager get error~

[YuraKostin]

Solution was found!!! Just remove folder node_modules and after that use only yarn package manager.

Hello from 2019. Unfortunately it didn't help me.
I still see 'Compiling ...'.

I've described my issue here https://github.com/zeit/next-plugins/issues/419#issuecomment-473806423

Any ideas?

Thanks.

UPD

It doesn't matter anymore. I've fixed my problem.

[Vinit-fynd]

@YuraKostin can you share how you fixed it?

[YuraKostin]

Hello.

Did you read my comment here https://github.com/zeit/next-plugins/issues/419 ? Look at "UPD 2" part.

[asherccohen]

I have asked for https://github.com/zeit/next-plugins/issues/419 to be opened again as I'm still having this problem.

[YuraKostin]

I have asked for https://github.com/zeit/next-plugins/issues/419 to be opened again as I'm still having this problem.

Hello.

Did you try "divide and rule" approach, which i described here https://github.com/zeit/next-plugins/issues/419#issuecomment-473806423 ?

[asherccohen]

Tx for the answer. I did try to uncomment parts of the scss file but to no avail. It looks like it doesn't compile the file and just hangs there.
Here is a repo https://github.com/asherccohen/next-starter that I bootstrapped to show scss doesn't compile.

[asherccohen]

SOLUTION FOUND:
For anyone having the 'Compiling...' problem check webpack loaders.
My problem was due to url imports in scss (background: url(/something.jpg) pointing to the wrong folders; the imports were silently failing and stopping compilation.
In my case just changing the path worked but I suggest looking into a custom configuration in next.config.js (if you don't have one refer to the docs and create one).

An example could be:

const withSass = require('@zeit/next-sass');
const withCSS = require("@zeit/next-css");
module.exports = withCSS(withSass({
webpack (config, options) {
config.module.rules.push({
test: /.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
use: {
loader: 'url-loader',
options: {
limit: 100000
}
}
});

   return config;

}
}));

This DID NOT work for me, as explained my solution was to change path in the url imports.
Please address the silently failing bug as it can be very time consuming not knowing where to look at.

[jaredcwhite]

I just got bit hard by this bug. I'm still on Next 9.2.0 and the separate next-sass plugin. Anyone know if this got fixed in the latest Next version?

[asherccohen]

Latest next versions have css and sass plugins already built in, so you won't need to add them yourself. I'm not too sure about the url imports bug itself though. This thread is helping many with the same problem so I guess we could simply make sure the problem is well documented on their website.