Parcel: Very unstable - build freezes and no idea how to debug accurately

[Destroy666x]

🐛 bug report

Hello, our experience with Parcel has been very poor so far. First we had an issue with multiple watch instances raising CPU to 100% because old ones weren't closed if connection timed out, but we managed to get around that with automatic timeouts.

Then Parcel decided to raise CPU to 100% on our AWS production pipeline S3 setup. We tried different options, some library updates, etc. - no dice. So we went for a better plan to test. It built. Then we went back down without changing anything in the repo. It kept building correctly. What...? 🤔

It was ok for a bit and now the problem returned on Travis where we can't do anything with CPU. They moved https://blog.travis-ci.com/2018-11-19-required-linux-infrastructure-migration and builds started failing. We tried different distributions with no result, also getting rid of yarn cache and setting the worker environment variable. It stopped at Build removeClass.js consistently, so we upgraded dom-helpers to which the file belongs. Then it started consistently stopping at Build SomeProject.scss project file which has nothing unusual. Using disable minification Parcel option moved it a bit further to our modal file and I stopped for now because no idea how many steps like that will be required.

Locally on Node Docker container it works just fine and builds in under a minute. I'll try lowering container's available CPU to see if that changes things.
EDIT: apparently it works with cpus: 0.5... Very slowly but it goes through at least. So I guess it's not related to CPU alone. I removed node_modules, dist and .cache to make sure the container starts like Travis does.

🎛 Configuration (.babelrc, package.json, cli command)

parcel build ./public/index.html --no-cache --log-level 4 --out-dir ./dist/

{
  "name": "not-relevant",
  "version": "1.0.0",
  "dependencies": {
    "apollo-client-preset": "^1.0.8",
    "bluebird": "^3.5.1",
    "classnames": "^2.2.6",
    "d3-geo": "^1.10.0",
    "d3-scale": "^2.1.0",
    "dom-helpers": "^3.4.0",
    "dom4": "^2.0.0",
    "fg-overthrow": "^1.2.0",
    "graphql": "^14.0.2",
    "graphql-tag": "^2.9.2",
    "hex-rgba": "^1.0.1",
    "intersection-observer": "^0.5.0",
    "lodash": "^4.17.4",
    "nuka-carousel": "4.4.3",
    "object-assign": "^4.1.1",
    "prop-types": "^15.5.10",
    "rc-trigger": "^2.5.4",
    "react": "^16.5.2",
    "react-animated-number": "^0.4.4",
    "react-apollo": "^2.2.1",
    "react-dom": "^16.5.2",
    "react-measure": "^2.0.2",
    "react-modal": "v3.0.0",
    "react-redux": "^5.0.7",
    "react-redux-i18n": "robert-kasza/react-redux-i18n#changed-brackets",
    "react-router": "^3.0.0",
    "react-transition-group": "^2.4.0",
    "redux": "^4.0.0",
    "redux-actions": "^2.4.0",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "remove": "^0.1.5",
    "reselect": "^3.0.1",
    "throttle-debounce": "^1.0.1",
    "viewport-units-buggyfill": "^0.6.2",
    "whatwg-fetch": "^2.0.4"
  },
  "scripts": {
    "prebuild": "rm -rf dist/* && touch ./dist/.gitkeep",
    "build": "yarn build:fonts && parcel build ./public/index.html --no-cache --log-level 4 --out-dir ./dist/",
    "develop": "parcel --port 8080 --hmr-port 8090 ./public/index.html --out-dir ./dist/",
    "start": "yarn install && yarn build",
    "start-dev": "yarn install && yarn build:fonts && yarn develop",
    "build:fonts": "fontello-cli install --config ./src/config/fontello.config.json --font ./src/font/ --css ./src/styles/font/",
    "test": "jest",
    "test:update": "yarn test --updateSnapshot",
    "test:e2e": "cypress open --project src/e2e",
    "lint": "eslint src",
    "lint:fix": "eslint src --fix --quiet",
    "format": "prettier --write 'src/**/*.js' && yarn lint:fix",
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "*.js": [
      "jest --bail --findRelatedTests",
      "yarn lint --quiet",
      "git add"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-transform-regenerator": "^7.0.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "babel-core": "^7.0.0-bridge",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.6.0",
    "css-loader": "^0.28.4",
    "cypress": "^3.1.1",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "enzyme-to-json": "^3.3.4",
    "eslint": "^5.4.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-prettier": "^3.0.1",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jest": "^21.21.0",
    "eslint-plugin-jsx-a11y": "^6.1.1",
    "eslint-plugin-react": "^7.11.1",
    "fontello-cli": "^0.4.0",
    "husky": "^0.14.3",
    "jest": "^23.5.0",
    "jest-css-modules": "^1.1.0",
    "lint-staged": "^7.2.2",
    "node-sass": "^4.11.0",
    "parcel-bundler": "^1.10.3",
    "prettier": "^1.14.2",
    "rebase": "0.3.0",
    "scss": "^0.2.4"
  }
}

🤔 Expected Behavior

The build should be consistent across different types of systems and environments. Consistently working not freezing hopefully.

😯 Current Behavior

The build process is unreliable and fails who knows why.

💁 Possible Solution

No clue. But it'd involve making Parcel eat less CPU, not sure why it needs so much.

🔦 Context

Not sure what to add here.

💻 Code Sample

-

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.10.3
| Node | 8.12.0
| npm/Yarn | yarn, latest
| Operating System | Ubuntu Xenial/Trusty

[DeMoorJasper]

Hi, the has many known issues partially because we use chokidar which has a lot of issues and we also watch node modules which adds a lot of stress on the watcher, but adds various benefits for linked modules and debugging issues in node modules which is pretty common in large projects.

The issue with 100% cpu could be anything though. A minimal reproduction repo would be very helpfull. It's probably related to the code or a dependency of you project.

[Destroy666x]

I provided the list of dependencies, I'd provide minimal reproduction repo but as I mentioned I have no possible clue what causes it considering the circumstances, so I'd have to add each library and file one by one, then test each combination on Travis. And that would take much more time than I unfortunately have, I could also end up with almost entire project which is private.

Could you direct me into a better debugging method than that or what I described? Are there any already known causes (I saw one issue talking about too high number of named imports, but it doesn't seem to be that)? What could be possible reasons for it failing when the same source files, Node/yarn version and package lock are on local Docker environment which is fine?

[DeMoorJasper]

@Destroy666x try replacing node-sass with sass.
node-sass has a bunch of known issues and we no longer install it by default. It mainly fails when a lot of files are being processed in parallel, not sure why it happens but it was resolved once we stopped using it. We still support it for backwards compatibility though.

this should resolve the freezing issue with scss files. (hopefully it also resolves the high cpu usage)

[Destroy666x]

Thanks for advice! Someone from our team got to test it earlier than me and apparently and that alone fixed everything related to building. I guess a good idea would be mentioning somewhere in the documentation that this is the preferred library, especially that e.g. here I stumbled upon recommendation of node-sass: https://github.com/parcel-bundler/parcel/issues/60 when I was looking for a solution.

[DeMoorJasper]

Awesome, glad that fixed everything. I’ll close this for now, feel free to reopen this if the issue is not fully resolved or reopen any new issues for more specific bugs/features

_{Sent with GitHawk}

[valentinbdv]

+1 it fixed my compilation freezing issue too!