Parcel: still has a circular dependencies bug

Created on 15 Apr 2018  路  14Comments  路  Source: parcel-bundler/parcel

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
image

馃實 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.7.0 |
| Node | 8.9.3 |
| npm | 5.6.0 |

Bug Confirmed Bug Help Wanted HMR
Source
picture xwchris
👍10

Most helpful comment

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.

picture emadabdulrahim on 1 Dec 2018
👍5 🎉1

All 14 comments

A test repo would be helpfull for debugging and confirming this

DeMoorJasper picture DeMoorJasper on 18 Apr 2018

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

xwchris picture xwchris on 18 Apr 2018
👍1

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
mininao picture mininao on 1 Aug 2018
👍1

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.

kjellski picture kjellski on 7 Aug 2018
👍5

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

DeMoorJasper picture DeMoorJasper on 7 Aug 2018

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>)
    ...

image

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 picture RPDeshaies on 10 Oct 2018
👍2

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;
};
RPDeshaies picture RPDeshaies on 12 Oct 2018
👍1

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

  1. Run tsc -w
  2. Run parcel index.html
  3. Save .tsx file in editor
  4. 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)
brookback picture brookback on 25 Oct 2018

Any updates on this issue?

emadabdulrahim picture emadabdulrahim on 21 Nov 2018
👍1

Also getting this error, any updates?

wpitallo picture wpitallo on 30 Nov 2018

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.

emadabdulrahim picture emadabdulrahim on 1 Dec 2018
👍5 🎉1

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

npm -g install madge
madge --circular path/to/index.js
mrcoles picture mrcoles on 29 Jan 2019
👍4

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

kjellski picture kjellski on 30 Jan 2019
👍3

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.

johanberonius picture johanberonius on 11 Feb 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

jzimmek picture jzimmek  路  3Comments
devongovett picture devongovett  路  3Comments
jsftw86 picture jsftw86  路  3Comments
davidnagli picture davidnagli  路  3Comments
adamreisnz picture adamreisnz  路  3Comments