Parcel: Rebuild HMR results in endless render cycle (?) (React)

[nihiluis]

🐛 bug report

I use parcel and then change a file, parcel rebuilds and then my React reloads/rerenders (something like that) forever and my pc goes out of RAM and dies for 5 min. when I use console.log("s") it prints this infinitely, thats why i think it reloads. maybe it is related to some redirect logic of the route.. (ubt the conditions are not given)

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

parcel ./index.html

"scripts": {
    "dev": "parcel ./index.html",
    "dev-nc": "parcel --no-cache ./index.html",
    "start": "parcel --no-hmr ./index.html"
  },
  "dependencies": {
    "await-protect": "^1.0.9",
    "axios": "^0.18.0",
    "classnames": "^2.2.5",
    "formik": "^0.11.11",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.2.2",
    "redux": "^4.0.0",
    "redux-actions": "^2.3.2",
    "redux-saga": "^0.16.0"
  },
  "devDependencies": {
    "@types/classnames": "^2.2.3",
    "@types/history": "^4.6.2",
    "@types/node": "^10.0.4",
    "@types/react": "^16.3.13",
    "@types/react-dom": "^16.0.5",
    "@types/react-redux": "^5.0.19",
    "@types/react-router-dom": "^4.2.6",
    "@types/redux-actions": "^2.2.4",
    "node-sass": "^4.9.0",
    "parcel-bundler": "^1.8.1",
    "parcel-plugin-typescript": "^0.7.1",
    "parcel-plugin-inlinesvg": "^1.0.0",
    "postcss-camel-case": "^1.0.1",
    "postcss-modules": "^1.1.0",
    "typescript": "^2.8.3"
  }

i have no bubble

🤔 Expected Behavior

hot reloda no crash

😯 Current Behavior

hot reload endless cycle

💁 Possible Solution

dont know. turn off hot reload.

🔦 Context

crash my firefox by using lots of memory

💻 Code Sample

dont have

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel |181
| Node |950
| npm/Yarn | yarn 160
| Operating System |archlinux

[Christopher2K]

Same issue here. I'm building a Typescript React App and the parcel make my app fall in an infinite reload loop !

@nihiluis we both have in common parcel-plugin-typescript. Maybe this bug is related to this plugin

[DeMoorJasper]

@fathyb could this be related to parcel-plugin-ts?

[fathyb]

@DeMoorJasper not sure, it doesn't do much that has an effect on runtime or HMR.

@Christopher2K @nihiluis Does it still does it when you remove the plugin? If not could you provide a reproduction? If you can't share your code but can share your config (if any) it could help to find any other similarities.

[acro5piano]

Same here, I will provide a reproduction repository. Thanks

[fathyb]

~@acro5piano are using using parcel-plugin-typescript? If yes does it still does it when you remove it?~ I misread.

[acro5piano]

@fathyb I used to use parcel-plugin-typescript. I remove the package but the issue is still occurring...
I tried parcel index.html --no-cache but still render loop.

[acro5piano]

FYI: I am using vim so I added the following settings

set nobackup
set nowritebackup
set backupcopy=yes

however, still happening.

https://github.com/parcel-bundler/parcel/issues/382#issuecomment-353644874

[acro5piano]

Hi, I could reproduce the issue, though it appears as different form.

https://github.com/acro5piano/Parcel-Issue-1317--endless-render/tree/reproduction-package-json

To reproduce

• Check out the repo
• yarn install
• yarn start
• Open http://localhost:1234 and chrome developer tool > console (for confirmation)
• Open "package.json"
• Edit something and save

Then we will find a lot of Looping log.

Screenshots

Investigation

In this example, package.json is the trigger of the loop, but other files such as components/App.tsx aren't.

In my real (toy) project, editing component files managed by react-router can be triggers.

https://github.com/acro5piano/nail-carte

Thanks!

[jpergler]

I confirm the behavior of repo created by @acro5piano. It fails only when editing the package.json, it did not loop for edits in .tsx files or .ts files I had added.

In my project it fails when I edit a .ts file which contains some helper methods. However I can't find out some rule on which files in which condition break it.

[acro5piano]

@jpergler Thank you for the confirmation.

In my project it fails when I edit a .ts file which contains some helper methods

Yeah, in my project (not reproduce repo) it fails when editing ts and tsx files, too.

[pke]

Can confirm, its not related to .ts and also happens when saving .js files. (1.7.1 here)

[gesposito]

Hey guys, in my case, for a project I ended up working with the issue is with some sort of circular dependencies (just imported/resolved by parcel, not executed).

I'll try to illustrate it:

app/
├─ Page.js

import { Header, Footer } from "./components"
// ...

│├─ components/
│├─ index.js

export { default as Header } from './Header.js'
export { default as Footer } from './Footer.js'
export { default as List } from './List.js'
export { default as ListItem } from './ListItem.js'

│├─ List.js

import { ListItem } from './'

// ...

[acro5piano]

@gesposito

Did you fixed it by resolving the circular dependencies?

[Tanoemon]

Same here.
In my case, it didn't happen when it was only one .ts file.
When I split it into multiple .ts files to make it readable, the endless render storm came.

[Tanoemon]

I just read @gesposito 's case and I found my code also has circular dependencies.
After I removed them, the issue resolved.
I will turn off hot reload for now.

[MuYunyun]

In my case, when referencing a function from b.js in a.js，at the meanwhile referencing a function from a.js in b.js，as follow:

// filename: a.js
import { fnB } from 'b.js'

// filename: b.js
import { fnA } from 'a.js'

and then I use parcel ./test/index.html --open -p 1234 --no-cache to start my project.
at moment , if I press ctrl + s to save the a.js or b.js. It will endless render.

[joel1st]

As a work around:
https://github.com/parcel-bundler/parcel/issues/1915#issuecomment-414747704

This appears to prevent the infinite / circular dependency issue that causes the browser to hang.
Rather than hot reload, it refreshes the page though.

In the entry js/ts of the application.

if (module && module.hot) {
  module.hot.accept(function () {
    location.reload();
  });
}

[slikts]

Parcel is nearly unusable for me due to this as it constantly hangs. I'm using Parcel 1.11.0 with no plugins.

[mischnic]

@slikts Any chance you can share a reproduction? Modifying package.json will update all assets, making debugging hard.

[mischnic]

@DeMoorJasper I can't figure out where cached.hot would be set in hmr-runtime. Could there be a && cached.hot missing in the first if condition: ?

https://github.com/parcel-bundler/parcel/blob/58a034871bcaa7abe30065f9b9f9a5417b1d389b/packages/core/parcel-bundler/src/builtins/hmr-runtime.js#L152-L160

[mindgrub-egottlieb]

Can confirm that this also occurs for me when I have circular imports, same as @MuYunyun. 100% reproducible, and it always stops infinite render looping as soon as I remove the circular imports.

[damianobarbati]

@mindgrub-egottlieb how do I find circular imports in my deps graph? I'm stuck on this as @slikts, can't use parcel v2 😩

[bard]

@damianobarbati try https://www.npmjs.com/package/dependency-cruiser

[damianobarbati]

@bard I had to use --no-cache and remove the hmr block using module.hot I had in the code to work it around.
I'll try later your suggestion, thanks!