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

🐛 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

About this issue

Original URL
State: open
Created 6 years ago
Reactions: 8
Comments: 24 (6 by maintainers)

Most upvoted comments

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

pke on Jun 8, 2018

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!

acro5piano on May 21, 2018

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 './'

// ...

gesposito on Jul 4, 2018

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

slikts on Dec 23, 2018

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.

MuYunyun on Jul 26, 2018

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.

Tanoemon on Jul 24, 2018

@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 on May 21, 2018