still has a circular dependencies bug #1192

xwchris · 2018-04-15T13:57:22Z

Choose one: is this a 🐛 bug report

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

.babelrc

{
  "presets": [
    "env"
  ],
  "plugins": [
    ["transform-react-jsx", {
      "pragma": "React.createElement"
    }]
  ]
}

react.js

import Component from './component';

const React = {
  createElement: (tag, attrs, ...children) => ({tag, attrs, children}),
  Component
};

export default React;

welcome.js

import React from './react';

class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div className="container" >
        <h1>Welcome</h1>
        <h2>{this.state.count}</h2>
        <button
          onClick={() => this.onClick()}
        >click me</button>
      </div>
    )
  }
}

export default Welcome;

react-dom.js

import Component from './component';
let count = 0;

const ReactDOM = {
  render: (vnode, container) => {
    console.log('render', count++);
  }
};

export default ReactDOM;

test.js

import React from './react';
import ReactDOM from './react-dom';
import Welcome from './welcome';

ReactDOM.render(
  <Welcome name="hello" />,
  document.getElementById('root'),
);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>
  <script src="./src/test.js"></script>
</body>
</html>

when save the react-dom.js it will show the bug

🤔 Expected Behavior

print render limited times

😯 Current Behavior

print forever, it will run untill Maximum call stack size

🌍 Your Environment

Software	Version(s)
Parcel	1.7.0
Node	8.9.3
npm	5.6.0

The text was updated successfully, but these errors were encountered:

DeMoorJasper · 2018-04-18T08:15:21Z

A test repo would be helpfull for debugging and confirming this

xwchris · 2018-04-18T09:55:58Z

I create a repo, you can see the bug. @DeMoorJasper

mininao · 2018-08-01T09:19:23Z

Yeah, I can confirm I have the same bug cc @danolife @barnaby
Here's my setup in a nutshell

A.js

import B from './B.js'

export const C = 'xxx'

export default (
 <B/>
)

B.js

import { C } from './A.js'

export default 'hello' + C

kjellski · 2018-08-07T10:02:56Z

Same issue, can we help or is it some of the fixes that just need to be merged? There are quite some with the label:HMR .

FYI: Currently this breaks the tab on every source change which is such a pain that we'd probably switch back to webpack just to have it not crashing chrome tabs all the time.

DeMoorJasper · 2018-08-07T15:49:44Z

There is no fix for this in the PRs yet. Feel free to help look into this and possibly fix the issue.

@kjellski Feel free to hit me up on https://spectrum.chat/parcel if you need any help debugging or fixing the issue

RPDeshaies · 2018-10-10T14:36:24Z

Seems like @xwchris deleted the repo.

So I reproduced the problem with @mininao 's case using Parcel + TypeScript in this repo here

https://github.com/RPDeshaies/parcel-issue-1192

From the README

How to
npm install
npm start
Open http://localhost:1234 in chrome 
Go back in your editor and save either A.ts or B.ts

In the dev console you will see:

src.77de5100.js:58 Uncaught RangeError: Maximum call stack size exceeded
    at Function.resolve (src.77de5100.js:58)
    at localRequire (src.77de5100.js:55)
    at Object.eval (eval at hmrApply (index.ts:6), <anonymous>:7:11)
    at newRequire (src.77de5100.js:49)
    at hmrAccept (index.ts:6)
    at index.ts:6
    at Array.some (<anonymous>)
    at hmrAccept (index.ts:6)
    at index.ts:6
    at Array.some (<anonymous>)
    ...

Here's the package.json

{
  "name": "parcel-issue-hmr-circular",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "parcel src/index.html"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/RPDeshaies/parcel-issue-1192.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/RPDeshaies/parcel-issue-1192/issues"
  },
  "homepage": "https://github.com/RPDeshaies/parcel-issue-1192#readme",
  "dependencies": {
    "parcel": "^1.10.2"
  },
  "devDependencies": {
    "typescript": "^3.1.2"
  }
}

So the bug is still present even with the latest version of ParcelJS.

This repo should help figure out how to fix the issue.
If I can be of any help don't hesitate

RPDeshaies · 2018-10-12T15:55:23Z

Status: I've been trying to follow the guide in this article (by the creator of MobX)

https://medium.com/visual-development/how-to-fix-nasty-circular-dependency-issues-once-and-for-all-in-javascript-typescript-a04c987cf0de

And still, Parcel is giving me a headache with all of this :(

Any help ? @DeMoorJasper ?

Here's a branch from the repo I've created that reproduces the issue with the fix I've tried with the internal module pattern

https://github.com/RPDeshaies/parcel-issue-1192/tree/fix/with-internal

CC @mweststrate, maybe you have an idea ? I saw in your post that you were using parcel as well ?

//index.ts
import * as internal from "./internal";

console.log("Main");
console.log(internal.A);
console.log(internal.B);
console.log(internal.C);


//internal.ts
export * from "./circular/A";
export * from "./circular/B";

//a.ts
import { B } from "../internal";

export const C = "xxx";

export const A = () => {
  return B;
};

//b.ts
import { C } from "../internal";

export const B = () => {
  return C;
};

brookback · 2018-10-25T09:20:32Z

I've got the same with Parcel 1.10.3 and with Typescript (external compile).

Run tsc -w
Run parcel index.html
Save .tsx file in editor
Get error

build.06da9ca9.js:54 Uncaught RangeError: Maximum call stack size exceeded
    at localRequire (build.06da9ca9.js:54)
    at Object.parcelRequire.build/view/Header.js.react (Header.tsx:1)
    at newRequire (build.06da9ca9.js:49)
    at hmrAccept (index.tsx:7)
    at index.tsx:7
    at Array.some (<anonymous>)
    at hmrAccept (index.tsx:7)
    at index.tsx:7
    at Array.some (<anonymous>)
    at hmrAccept (index.tsx:7)

emadabdulrahim · 2018-11-21T02:06:40Z

Any updates on this issue?

wpitallo · 2018-11-30T10:05:52Z

Also getting this error, any updates?

emadabdulrahim · 2018-12-01T18:18:59Z

My workaround was to create a new file that eliminates the A > B, B > A circle. Then I can import from that file and resolve this issue.

mrcoles · 2019-01-29T02:57:20Z

adding to @emadabdulrahim’s point, you can find said circular dependencies by using madge:

npm -g install madge
madge --circular path/to/index.js

kjellski · 2019-01-30T13:37:58Z

We've done that and resolved all these circular references, but it didn't help. The problem still persisted.

johanberonius · 2019-02-11T09:43:58Z

Just for reference and searchability, in Firefox dev tools console this error shows up as too much recursion.

In my case, the workaround to remove all circular imports seemed to do it. Now hmr works for all files.

DeMoorJasper added the 🐛 Bug label Apr 15, 2018

DeMoorJasper mentioned this issue Sep 27, 2018

Uncaught RangeError: Maximum call stack size exceeded at getParents #2063

Closed

DeMoorJasper added 🙏 Help Wanted ✔️ Confirmed Bug labels Nov 30, 2018

devongovett added this to To Do in Bugs via automation Jan 6, 2019

mischnic added the HMR Hot Module Reloading label Jan 30, 2019

mischnic mentioned this issue Feb 25, 2019

Circular Dependency Issue #1629

Closed

rhurstdialpad mentioned this issue Feb 25, 2019

Prevent circular deps from causing a stack overflow in HMR runtime #2660

Merged

devongovett closed this as completed in #2660 Feb 25, 2019

Bugs automation moved this from To Do to Done Feb 25, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

still has a circular dependencies bug #1192

still has a circular dependencies bug #1192

xwchris commented Apr 15, 2018 •

edited

DeMoorJasper commented Apr 18, 2018

xwchris commented Apr 18, 2018 •

edited

mininao commented Aug 1, 2018 •

edited

kjellski commented Aug 7, 2018

DeMoorJasper commented Aug 7, 2018 •

edited

RPDeshaies commented Oct 10, 2018

RPDeshaies commented Oct 12, 2018

brookback commented Oct 25, 2018

emadabdulrahim commented Nov 21, 2018

wpitallo commented Nov 30, 2018

emadabdulrahim commented Dec 1, 2018

mrcoles commented Jan 29, 2019

kjellski commented Jan 30, 2019

johanberonius commented Feb 11, 2019 •

edited

still has a circular dependencies bug #1192

still has a circular dependencies bug #1192

Comments

xwchris commented Apr 15, 2018 • edited

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

🤔 Expected Behavior

😯 Current Behavior

🌍 Your Environment

DeMoorJasper commented Apr 18, 2018

xwchris commented Apr 18, 2018 • edited

mininao commented Aug 1, 2018 • edited

kjellski commented Aug 7, 2018

DeMoorJasper commented Aug 7, 2018 • edited

RPDeshaies commented Oct 10, 2018

RPDeshaies commented Oct 12, 2018

brookback commented Oct 25, 2018

emadabdulrahim commented Nov 21, 2018

wpitallo commented Nov 30, 2018

emadabdulrahim commented Dec 1, 2018

mrcoles commented Jan 29, 2019

kjellski commented Jan 30, 2019

johanberonius commented Feb 11, 2019 • edited

xwchris commented Apr 15, 2018 •

edited

xwchris commented Apr 18, 2018 •

edited

mininao commented Aug 1, 2018 •

edited

DeMoorJasper commented Aug 7, 2018 •

edited

johanberonius commented Feb 11, 2019 •

edited