Bundler freezes since 1.8.0

[jpergler]

🐛 Bug report

🤔 Expected Behavior

The bundler should finish the process.

😯 Current Behavior

Bundler freezes on build and does not finish at all. Previously I had version 1.7.0 and sometimes it was frozen as well but that was only several times and when restarted it mostly worked. After upgrade to version 1.8.1 I tried to build approx. 20 times but it did not finish at all. No changes in project. I tried version 1.8.0 and it did not work either.

🔦 Context

My project is just index.html with references scripts. Typescript is used in project. App based on React and Bootstrap.

🌍 Your Environment

Software	Version(s)
Parcel	^1.8.0
Node	9.11.1
npm	5.6.0
Operating System	Windows 10

[DeMoorJasper]

Could you provide an example repository for this? Would be easier if we could reproduce it

[jpergler]

@DeMoorJasper Well I cannot offer you the specific source code I am working on so I try to create similar project but it is not certain that it will reproduce as well.

Another interesting thing is that currently I am working with version 1.7.1 and just now I added some more files (specifically two .tsx files and one partial .scss file) and from now on the buid with parcel freezes significantly more often.

[jpergler]

@DeMoorJasper Hmm I don't have the repo for reproduce but it seems to be machine related rather than project related.

I run the same project on my second computer and everything works fine. On my "broken" computer there was actually one more thing - when I changed something in some partial _partial.scss file than it did not recompile. That works on the second computer - either with 1.7.1 or 1.8.1.

So I checked the versions of tooling and I got Node in version 8.9.4 on the second computer. So I went to the "broken" computer, uninstalled Node and installed the same version 8.9.4. Now it works just fine.

I also then updated Parcel to latest (1.8.1) and it works just fine as well, really fast.

So it seems to be problem with Node version 9.11.1 or maybe 9.*.

[DeMoorJasper]

That's strange glad you figured it out though :)

I guess I can close this off if it's a node.js bug?

[jpergler]

For the matter of the original issue yes you can close it, downgrade to Node.js version 8.9.4 resolved the problem. The rest depends on whether you want to investigate or somehow solve the issue for Node.js 9.

[Hammster]

My bundle also froze today on node 8.9.3, i was not able to pin down the reason before i left the office and i'm on vacation until monday.

[megalithic]

Chiming in, on node 8.11.1, and a clean install of parcel-bundler 1.8.1 via yarn. it freezes during building with parcel app/javascript/application.js -d public/parcels --public-url /parcels; we are running inside of a rails project using parcel-rails (to be completely transparent, not sure if that is the cause or not). Parcel 1.6.2 (where we were previous to this) builds fine.

[benhutton]

I think I'm seeing this too, on node 8.11.1 and parcel 1.8.1. It does build a few files successfully, then sits at "Building styles.scss..."

@DeMoorJasper I'm gonna drop some logging statements in the source and see if I can give ya'll something more precise to look into.

[benhutton]

@DeMoorJasper I'll keep digging, but it looks like this line is never completing: https://github.com/parcel-bundler/parcel/blob/master/src/Asset.js#L181

It's also notable that we have a bunch of files all named styles.scss (in different directories), and it seems to "freeze" on a bunch of those all being processed in parallel by the worker farm.

Does this idea of files with the same name bring anything to mind?

[Hammster]

@benhutton since you mention this. For me it happened on a section where all components got compiled. All of them are named index.vue

[mririgoyen]

We are also seeing this behavior. Parcel 1.8.1 Node 10.1.0 yarn 1.6.0 macOS

Parcel will just freeze "Building something..." and never finish. Killing the process and restarting doesn't help. Very infrequently, it will finish.

[megalithic]

@benhutton / @Hammster just to confirm, we have similar file structures setup where we have a lot of files named the same, under different folders, index.tsx for us for react/typescript files.

[benhutton]

To add another wrinkle (which @goyney hints at): if we kill and re-run it enough times, eventually it will finish (so things are getting put into cache and that keeps them from breaking it?)

[DeMoorJasper]

Would love to dig into this if anyone could provide a test repository.

[benhutton]

It's interesting that we all seem to be hanging on different file types. For me, it's scss. For @Hammster, it's vue. For @megalithic, it's tsx. Does that tell us anything @DeMoorJasper?

[DeMoorJasper]

That tells us it's not related to a specific compiler, but not much more. I originally thought it was a node 8 issue, but apparently it also happens on node 10.

[benhutton]

@DeMoorJasper I've just narrowed my problems down to this line never finishing: https://github.com/parcel-bundler/parcel/blob/master/src/assets/SASSAsset.js#L57

Looks like I've got 4 styles.scss files hung at the same time. Here's what opts looks like for those 4 files, right as things freeze.:

{ includePaths: [ '/home/ben/projects/dg/app/components/daily_email' ],                                   
  data: '@import "../../client/styles/_settings/_legacy_settings";\n@import "../../client/styles/_mixins/_text";\n\n.daily-email {\n  background-color: whitesmoke;\n  padding-top: 60px;\n  overflow: hidden;\n  color: #333333;\n}\n\n.daily-email__inner {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n}\n\n.daily-email__proposition,\n.daily-email__device-holder {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  width: 50%;\n}\n\n.daily-email__proposition {\n  text-align: right;\n  padding-right: 50px;\n  padding-left: calc(50% - 450px);\n}\n\n.daily-email__proposition .error-message {\n  margin-top: 12px;\n  margin-bottom: -12px;\n}\n\n.daily-email__proposition .error-message > em {\n  background-color: #ffff66;\n  font-size: 13px;\n}\n\n.daily-email h1 {\n  @include text($size: 42px, $weight: bold);\n  margin-bottom: 12px;\n}\n\n.daily-email p {\n  @include text($size: 18px);\n}\n\n.daily-email__inputs {\n  display: flex;\n  flex-direction: row;\n  padding: 24px 0;\n  justify-content: flex-end;\n}\n\n.daily-email__field {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  box-shadow: none;\n  outline: none;\n  border-radius: 0;\n  box-sizing: border-box;\n  font-size: 13px;\n  width: 60%;\n  background-color: #ffffff;\n  border: 1px solid rgba(0,0,0,.3);\n  border-right: 0;\n  margin: 0;\n  padding: 0 12px;\n  line-height: 40px;\n}\n\n.daily-email__button {\n  box-sizing: border-box;\n  font-size: 13px;\n  width: 30%;\n  border: 0;\n  outline: none;\n  padding: 0;\n  margin: 0;\n  line-height: 40px;\n  padding: 0 12px;\n  background: $dg-red;\n  border: 1px solid $dg-red;\n  text-align: center;\n  color: #ffffff;\n  cursor: pointer;\n\n  /* Fixes rounded corners bug in Chrome */\n  -webkit-appearance: none;\n  -webkit-border-radius: 0;\n}\n\n.daily-email__device-holder {\n  padding-left: 50px;\n  padding-right: 50px;\n}\n\n.daily-email__device {\n  background-image: url(\'../../assets/images/daily_email_device.svg\');\n  background-repeat: no-repeat;\n  background-size: 100% auto;\n  box-sizing: border-box;\n  display: block;\n  height: 450px;\n  width: 360px;\n  border-radius: 55px 55px 0 0;\n  box-shadow: 30px 20px 6px rgba(0,0,0,.2);\n  padding-top: 90px;\n  padding-left: 23px;\n  padding-right: 23px;\n  padding-bottom: 0;\n\n  .daily-email__example {\n    overflow: scroll;\n    -webkit-overflow-scrolling: touch;\n    height: 100%;\n    -ms-overflow-style: none;\n\n    > img {\n      width: 100%;\n      margin: 0;\n      padding: 0;\n    }\n  }\n}\n\n\n@media screen and (max-width: 1024px) {\n\n  .daily-email__proposition {\n    padding-right: 0px;\n  }\n}\n\n\n@media screen and (max-width: 980px) {\n\n  .daily-email {\n    padding-top: 30px;\n  }\n\n  .daily-email h1 {\n    @include text($size: 36px);\n  }\n\n  .daily-email p {\n    @include text($size: 18px);\n  }\n\n  .daily-email__inner {\n    flex-direction: column;\n  }\n\n  .daily-email__inputs {\n    justify-content: center;\n    margin-left: auto;\n    margin-right: auto;\n    width: 70%;\n  }\n\n  .daily-email__device {\n    height: 300px;\n    width: 260px;\n    border-radius: 40px 40px 0 0;\n    box-shadow: 18px 10px 6px rgba(0,0,0,.2);\n    padding-top: 65px;\n    padding-left: 17px;\n    padding-right: 17px;\n  }\n\n  .daily-email__proposition {\n    width: auto;\n    text-align: center;\n    padding: 30px 0;\n    padding-right: 0px;\n  }\n\n  .daily-email__device-holder {\n    padding-left: 0;\n    padding-right: 0;\n    width: auto;\n  }\n}\n\n\n@media screen and (max-width: 620px) {\n\n  .home .daily-email {\n    padding-top: 0;\n    border-bottom: 1px solid #dcdcdc;\n    background-color: #ffffff;\n    margin-bottom: 30px;\n  }\n\n  .daily-email__inputs {\n    width: auto;\n  }\n\n  .daily-email h1 {\n    @include text($size: 30px, $weight: bold);\n    margin-left: 30px;\n    margin-right: 30px;\n    margin-bottom: 12px;\n  }\n\n  .daily-email p {\n    @include text($size: 16px);\n  }\n\n  .daily-email__inputs {\n    margin: 0 auto;\n    width: 100%;\n    padding-bottom: 0;\n  }\n}\n',                                                                                                             
  indentedSyntax: false,                                                                                  
  functions: { url: [Function: url] },                                                                    
  importer: [Function] }                                                                                  

{ includePaths: [ '/home/ben/projects/dg/app/components/explore_index' ],                                 
  data: '@import "../../client/styles/_settings/_legacy_settings";\n@import "../../client/styles/_mixins/_legacy_mixins";\n@import "../../client/styles/_mixins/_grid";\n@import "../../client/styles/_mixins/_text";\n\n.explore-indexes {\n  padding-top: 30px;\n  padding-bottom: 40px;\n  overflow: hidden;\n  clear: both;\n  @include grid-breakpoint(m) {\n    padding-bottom: 30px;\n    padding-top: 10px;\n  }\n}\n.explore-index {\n  margin-bottom: 10px;\n  padding: 15px 5px 10px;\n  border: 1px solid #dddddd;\n  @include grid-breakpoint(m, 10px) {\n    @include span(3, 6);\n    border: 0;\n  }\n  @include grid-breakpoint(l, 0) {\n    @include span(3);\n  }\n  @include grid-breakpoint(xl, 0) {\n    @include span(3);\n  }\n}\n.explore-index__heading {\n  @include text(resource-item-title);\n  padding: 0 5%;\n  .svg { @include transition(); }\n  svg {\n    margin: 3px 0 0 3px;\n    path { fill: map-get($text-colors, ultra-light); }\n  }\n  &:hover {\n    .svg { margin-left: 5px; }\n    svg  path { fill: $text-default-color; }\n  }\n}\n\n.explore-index__list {\n  padding-left: 5%;\n  dt {\n    @include text(label);\n    padding: 10px 0;\n  }\n  a {\n    @include transition();\n    @include text($size: xs);\n    color: map-get($text-colors, inline-link);\n    border-bottom: 1px solid transparent;\n    &:hover {\n      border-bottom: 1px solid $text-default-color;\n      color: $text-default-color;\n    }\n  }\n  dd {\n    padding-bottom: 6px;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    font-size: 12px;\n    line-height: 13px;\n    color: #9fa2a6;\n  }\n}\n\n\n// Styles for explore indexes requiring multiple columns\n.overflow--top {\n  .explore-index {\n    border-bottom: none;\n    margin-bottom: 0;\n    padding-bottom: 0;\n    @include grid-breakpoint(m, 0) {\n      margin-bottom: 10px;\n      padding-bottom: 5px;\n    }\n  }\n}\n\n.overflow--bottom {\n  .explore-index {\n    border-top: none;\n    padding-top: 0;\n    @include grid-breakpoint(m, 0) {\n      padding-top: 5px;\n    }\n  }\n  .explore-index__heading,\n  .explore-index__list dt {\n    display: none;\n    @include grid-breakpoint(m, 0) {\n      display: block;\n      visibility: hidden;\n    }\n  }\n}\n',                                                                                                        
  indentedSyntax: false,                                                                                  
  functions: { url: [Function: url] },                                                                    
  importer: [Function] }                                                                                  

{ includePaths: [ '/home/ben/projects/dg/app/components/explore_list' ],                                  
  data: '@import "../../client/styles/_settings/_legacy_settings";\n@import "../../client/styles/_mixins/_legacy_mixins";\n@import "../../client/styles/_mixins/_grid";\n@import "../../client/styles/_mixins/_text";\n\n.explore-list {\n  margin-top: 50px;\n  @media(max-width: 619px) {\n    padding: 0 6px;\n  }\n}\n\n.explore-list__label { @include text(resource-item-title-small, $size: 16px, $line-height: 21px); }\n\n.explore-list__list {\n  @include clearfix();\n  padding: 0;\n  list-style: none;\n}\n\n.explore-list__list-item {\n  box-sizing: border-box;\n  display: block;\n  margin-top: -1px;\n  width: calc(50% + 15px);\n  border: 1px solid transparent;\n  float: left;\n  &:nth-child(odd) { margin-left: -15px; }\n  &:nth-child(even) { margin-right: -15px; }\n  @media(min-width: 1270px) {\n    &:nth-last-child(2) a { border-bottom: 1px solid transparent; }\n  }\n  &:last-child a { border-bottom: 1px solid transparent; }\n\n  &:hover {\n    border: 1px solid #d0d0d0;\n    background: #ffffff;\n  }\n\n  &:hover a {\n    padding: 10px 15px;\n    width: 100%;\n    border-bottom: 1px solid transparent;\n  }\n  @media(max-width: 1269px) {\n    width: calc(100% + 30px);\n    margin-left: -15px !important;\n    margin-right: -15px !important;\n  }\n}\n\n.explore-list__link {\n  display: block;\n  margin: 0 auto;\n  padding: 10px 0;\n  width: calc(100% - 30px);\n  margin-bottom: -1px;\n\n  font-size: 13px;\n  line-height: 27px;\n  border-bottom: 1px solid #d0d0d0;\n  transition: none;\n}\n',                                                                                                                                                                                                     
  indentedSyntax: false,                                                                                  
  functions: { url: [Function: url] },                                                                    
  importer: [Function] }                                                                                  

{ includePaths: [ '/home/ben/projects/dg/app/components/explore_sections' ],                              
  data: '@import "../../client/styles/_settings/_legacy_settings";\n@import "../../client/styles/_mixins/_legacy_mixins";\n@import "../../client/styles/_mixins/_grid";\n@import "../../client/styles/_mixins/_text";\n\n.nowrap {\n  display: inline-block;\n  .svg { margin-right: 5px; }\n}\n\n.explore-sections {\n  padding-top: 20px;\n  padding-bottom: 30px;\n  overflow: hidden;\n  clear: both;\n}\n\n.articles.index .grouping__title + .explore-sections {\n  padding-top: 0;\n  .explore-sections__section__title { margin-top: 0; }\n}\n\n.explore-sections__section {\n  @include span(3, 6);\n  height: 140px;\n  @media only screen and (min-width: 400px) {\n    height: 120px;\n  }\n\n  @include grid-breakpoint(m) {\n    @include span(2, 6);\n  }\n  @include grid-breakpoint(l) {\n    @include span(2);\n    height: 150px;\n  }\n  @include grid-breakpoint(xl) {\n    @include span(2);\n    height: 130px;\n  }\n  @media only screen and (min-width: 1390px) {\n    height: 110px;\n  }\n  @include transition;\n  background: transparent;\n  &:hover {\n    background-color: #ffffff;\n    .svg {\n      margin-left: 5px;\n      path { fill: $text-default-color; };\n    }\n  }\n}\n.explore-sections__section__title {\n  @include text(resource-item-title-small);\n  width: 100%;\n  margin-bottom: 0;\n  margin-top: 5%;\n  .svg {\n    @include transition();\n    path { fill: map-get($text-colors, ultra-light); }\n  }\n  svg { margin-top: -1px; }\n}\n.explore-sections__section__body {\n  @include text($size: xs);\n  margin-top: 0;\n  margin-bottom: 0;\n}\n',                                                                                                                                                       
  indentedSyntax: false,                                                                                  
  functions: { url: [Function: url] },                                                                    
  importer: [Function] }  ```

[benhutton]

To add another wrinkle (which @goyney hints at): if we kill and re-run it enough times, eventually it will finish (so things are getting put into cache and that keeps them from breaking it?)

Disregard this. I had a bug in my diagnostic code. Things are breaking reliably for me.

[jpergler]

Ok, I put some more magic into this. It seems that it is actually not related to Node.js version 9 in the end. I worked on the projects, some new stuff was added to the project and the project build does not finish anymore. I am on the Node.js v8.9.4. When I switch to some other git branch of the project then the build finishes. When I switch back to the branch with added stuff it does not build again.

It seems that it is somehow related to some changes in project, but I can't trace which changes. It seems to me that adding some more files to project makes the trouble.

Might that be somehow related to some circular references?

[jpergler]

I found out that I was building in some cases with parcel in version 1.6.2 and in some cases with 1.8.1. With 1.6.2 it builds and with 1.8.1 it does not. There are fixes in 1.8.0 I need for some packages (i.e. react-data-grid) but I can't build the project. I am really unhappy with that and I guess I will have to go setup Webpack because Parcel is currently very unreliable. :-(

[mririgoyen]

I hear you, @jpergler. Between this and https://github.com/parcel-bundler/parcel/issues/1301, we are starting to process of investigating Webpack.

[DeMoorJasper]

Like I mentioned earlier, it's very hard to fix this without being able to reproduce it.

There has been a lot of changes since 1.6.2, can you try all versions between 1.6.2 and 1.8.1 to see where it broke @jpergler than we can at least slim down the search a little.

Although reading your issue it started at version 1.7?

[jpergler]

I understand and I would be happy to offer some repro but I can't see what makes the trouble and I can't offer my project sources.

I just checked that version 1.7.1 works fine, with 1.8.0 I start having trouble.

[Hammster]

I've been able to create a simple repo with the issue https://github.com/Hammster/parcel-1.8.x-freezbug

It is the same issue as described when multiple files follow the same naming pattern.

[jpergler]

@Hammster great! I can confirm that it freezes at my computer as well.

That reminds me that often the build freezes at some index.js file. Not only on this file, but I would say it is significantly more often than other file names.

[jpergler]

Tried different versions on the simple repro from @Hammster - build finishes with 1.7.1, and does not finish with 1.8.0 or 1.8.1. So the bug was probably introduced in 1.8.0.

[DeMoorJasper]

@Hammster Awesome! I'm able to reproduce this on windows running Node 10 (unfortunately not on mac :( ) @jpergler Thanks for checking that, I'll try look into this today

[DeMoorJasper]

This commit causes massive delays in builds (and most of the time freezes) when testing the repro repo (build go from 4secs to 30secs [if they pass]): https://github.com/parcel-bundler/parcel/commit/d67b76c8c62792f37ca5e5071be533198093f1ae

My PR #1368 fixes the issue, as the repro repo passes using that branch. So the watcher probably crashes for some reason

Something I also noticed is that the folder is formatted using \ one time and / the other times. But I guess this is irrelevant

[benhutton]

@DeMoorJasper fwiw, my problems happen when using build. I have not tried watch — it isn't part of my workflow. Does that make a difference?

[DeMoorJasper]

@benhutton Yeah build doesn't use the watcher so this is probably a different issue.

Can't seem to find any more bugs with the repro repo after using the watcher worker so would be nice if you could create a repo with a minimal repro test.

[jpergler]

@DeMoorJasper I tried the pull request version to build the repro from @Hammster and that works. However for my project it still does not work. :-(

[jpergler]

In my project it often freezes on boot.tsx (which is referenced in entry html file) or some index.js (I can't where does this file come from). Is it possible to see some logs or more verbose ouptut of the build?

[fathyb]

@jpergler did you try with --no-cache or removing the .cache directory? Unfortunately the files logged aren't really representative of what's happening, it just means that boot.tsx has been scheduled to be built but Parcel could be stuck on another file.

[DeMoorJasper]

Perhaps we should add some kind of debug mode, that creates a log file with a bunch of logs and verbose output so we can properly debug the issue? What do you think @fathyb ?

[fathyb]

@DeMoorJasper sounds like a great idea and it might be useful on other issues. Now that we have the logger singleton we could also add some logs in the Asset, something like :

1. Queuing file.tsx in Bundler
2. Parsing file.tsx in Asset.load
3. Processing file.tsx in Asset.transform
4. Building file.tsx in Asset.generate
5. Analysing file.tsx dependencies in Bundler
6. Packaging bundle.js in Packager

Relevant: #993

[DeMoorJasper]

Awesome! I'll make a PR that does that :)

[jpergler]

@fathyb I tried to delete .cache and --no-cache and still it does not finish.

I hope I will be able to offer information from more detailed logs.

[fathyb]

Ah, I think I know where it's from. @jpergler are you using Sass, Less or Stylus by any chance?

If yes it's probably deasync stalling the Node.js libuv event-loop.

If someone is not using Sass, Less or Stylus and still have the freeze please let me know.

[jpergler]

@fathyb Yeah, I am definitely using Sass. Do you have some proposal or fix?

[megalithic]

Sass with postcss here.

[fathyb]

I'm working on a long term fix (getting rid of deasync by using some tricks when possible). I'm also trying to create a repro by creating random .sass files (my project with ~50 .sass files of works fine on Windows with 1.8.1).

In the meantime you could help by trying abbr/deasync#52 by adding this in the end of [parcel directory]/node_modules/deasync/index.js :

// Fix for Deasync hanging
;(function(){
    var _org=setTimeout;
    var number=1;
    var max=100
    setTimeout=function(func,n){
        if(!n) n=0
        if(number==100) number=1;
        if(n<100)
                n+= ++number
        else
                n-= ++number
        return _org.apply(this,[func,n])
    }
})();

;(function(){
    var _org=setInterval;
    var number=1;
    var max=100
    setInterval=function(func,n){
        if(!n) n=0
        if(number==100) number=1;
        n+=++number
        return _org.apply(this,[func,n])
    }
})();

[fathyb]

Could someone try #1390 to confirm it fixes the freezes?

[jpergler]

@fathyb I confirm that for my project the build finishes using #1390. Even without the deasync fix.

[DeMoorJasper]

Reopening as this was my mistake to add this issue to the close list of the watcher worker. As the fix to the original issue is #1390

[natqe]

I'm surely that is connect to sass files. and now i need all the time to remove them and add them again after i running the script. it is very bad.

[aaronjameslang]

Can reproduce on macos node v10.3.0, parcel 1.7.1 is good, 1.8.0, 1.8.1 are bad. Presented as watch/serve modes not detecting changes. Currently downgraded to 1.7.1 and waiting for https://github.com/parcel-bundler/parcel/pull/1368 to make it to release.

Anyone trying to downgrade, parcel was published as parcel-bundler before 1.8.0

[benhutton]

I am still running into problems with 1.9.0! #1390 doesn't seem to have fixed it for me.

[Hammster]

I can confirm that this issue still persits in our project, even though my example repository seams to be fixed! @DeMoorJasper

This are the build files in order until to the point where it freezez.

The vue files use SCSS and Pug

--- Parcel bundle --------------------------------------------------------------
∞  Building...

∞  Building index.pug...
∞  Building initial.scss...
∞  Building index.js...
∞  Building css-loader.js...
∞  Building bundle-url.js...
∞  Building globals.js...
∞  Building eventHandler.js...
∞  Building electron.js...
∞  Building util.js...
∞  Building EcsIds.js...
∞  Building Controller-proxies.js...
∞  Building enums.js...
∞  Building promise-handler.js...
∞  Building index.js...
∞  Building backend-objects.js...
∞  Building navigator-objects.js...
∞  Building commands.js...
∞  Building example-module.js...
∞  Building localization.js...
∞  Building index.vue...
∞  Building container.vue...
∞  Building resizer.vue...
∞  Building stats.vue...
∞  Building index.js...
∞  Building vue.runtime.esm.js...
∞  Building index.vue...
∞  Building index.vue...
∞  Building index.vue...
∞  Building index.vue...

[fathyb]

Are you using Windows?

[Hammster]

Yes i am on Windows 10