Maximum call stack exceeded

[jamesplease]

Note: originally opened here, but they redirected me to this lib.

👋 Hi there! I am really enjoying this library. I recently ran into a problem when trying to use it with a particular Babel plugin. I'm wondering if anyone has seen anything similar?

The Problem

I am getting a maximum call stack exceeded when using rollup-plugin-babel along with the transform-react-remove-prop-types plugin.

The specific error is:

src/index.js → dist/react-composer.min.js...
[!] (babel plugin) RangeError: /Users/jmeas/webdev/react-projects/react-composer/src/index.js: Maximum call stack size exceeded
src/index.js
RangeError: /Users/jmeas/webdev/react-projects/react-composer/src/index.js: Maximum call stack size exceeded
    at error (/Users/jmeas/webdev/react-projects/react-composer/node_modules/rollup/dist/rollup.js:224:15)
    at Object.error (/Users/jmeas/webdev/react-projects/react-composer/node_modules/rollup/dist/rollup.js:17174:21)
    at /Users/jmeas/webdev/react-projects/react-composer/node_modules/rollup/dist/rollup.js:17183:29
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
    at Function.Module.runMain (module.js:695:11)
    at startup (bootstrap_node.js:188:16)
    at bootstrap_node.js:609:3

I'm not too familiar with the internals of Rollup or this plugin, so I was wondering if anyone here had any thoughts.

Reproducible Example

Pull down this branch of react-composer and run npm run build:umd:min.

The Configuration

.babelrc

{
  "presets": [["env", { "modules": false }], "stage-3", "react"],
  "plugins": [
    "external-helpers",
    "transform-class-properties",
    [
      "transform-react-remove-prop-types",
      {
        "mode": "remove",
        "removeImport": true
      }
    ]
  ]
}

rollup.config.js

Node 8.11.1
npm 5.8.0

Versions of things

"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-jest": "^22.1.0",
"babel-plugin-external-helpers": "^6.22.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-react-remove-prop-types": "^0.4.13",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-3": "^6.24.1",

"rollup": "^0.57.1",
"rollup-plugin-babel": "^3.0.3",
"rollup-plugin-commonjs": "^9.1.0",
"rollup-plugin-node-resolve": "^3.3.0",
"rollup-plugin-replace": "^2.0.0",
"rollup-plugin-uglify": "^3.0.0"

---

If you have any thoughts as to what might be going on, I'd love to hear it. If you think this isn't the right place for this issue, then no problem! Thank you for taking a look! 👍

[Andarist]

Have u resolved ur issue by any chance? Not sure if I should dive into it.

[jamesplease]

@Andarist , I just tried the reproducible example (linked above, also here) and the issue is still happening for me.

[!] (babel plugin) RangeError: /Users/jmeas/webdev/react-projects/react-composer/src/index.js: Maximum call stack size exceeded
src/index.js
RangeError: /Users/jmeas/webdev/react-projects/react-composer/src/index.js: Maximum call stack size exceeded
    at error (/Users/jmeas/webdev/react-projects/react-composer/node_modules/rollup/dist/rollup.js:224:15)
    at Object.error (/Users/jmeas/webdev/react-projects/react-composer/node_modules/rollup/dist/rollup.js:17174:21)
    at /Users/jmeas/webdev/react-projects/react-composer/node_modules/rollup/dist/rollup.js:17183:29
    at process._tickCallback (internal/process/next_tick.js:68:7)
    at Function.Module.runMain (internal/modules/cjs/loader.js:721:11)
    at startup (internal/bootstrap/node.js:228:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:576:3)

If you get around to digging in, I'd be curious to know if you find anything!

[Andarist]

Rollup has swallowed original stack trace - which is:

RangeError: react-composer/src/index.js: Maximum call stack size exceeded
    at TraversalContext.create (react-composer/node_modules/babel-traverse/lib/context.js:67:54)
    at TraversalContext.visitSingle (react-composer/node_modules/babel-traverse/lib/context.js:108:36)
    at TraversalContext.visit (react-composer/node_modules/babel-traverse/lib/context.js:192:19)
    at Function.traverse.node (react-composer/node_modules/babel-traverse/lib/index.js:114:17)
    at NodePath.visit (react-composer/node_modules/babel-traverse/lib/path/context.js:115:19)
    at TraversalContext.visitQueue (react-composer/node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitSingle (react-composer/node_modules/babel-traverse/lib/context.js:108:19)
    at TraversalContext.visit (react-composer/node_modules/babel-traverse/lib/context.js:192:19)
    at Function.traverse.node (react-composer/node_modules/babel-traverse/lib/index.js:114:17)
    at NodePath.visit (react-composer/node_modules/babel-traverse/lib/path/context.js:115:19)

This ofc happens when using standalone babel - without wrapping it in rollup.

From what I have checked it fails in transform-react-remove-prop-types's isStatelessComponent function. I think it tries to follow ur returned value to check if it returns JSX under the hood, but because of recursive nature of your library it just blows up the stack.

I recommend filing issue in that project - in your case it could be fixed by checking if cloneElement got used in return.

PS. You could also mention when creating issue in their repo that recursive functions can blow stack stack there, and they should guard against such situation too.

[jamesplease]

@Andarist , thank you so much for looking into this! I don't think that I have the Rollup knowledge to have figured this out myself.

I'll go ahead and open an issue on that project. Thank you!

[oliviertassinari]

Rollup has swallowed original stack trace - which is:

@Andarist I'm looking into the issue. How can I have access to the original stack trace?

[Andarist]

I've just wrapped this line manually in try/catch, logged the error and rethrow it.

Want to prepare a PR for rollup to log the stack trace, because its imho too valuable info to just swallow it - but just couldnt get time to do that at the moment.

This error should be reproducible with bare babel too, so it might be easier for you to just run babel via JS api in node to debug this.

[oliviertassinari]

@Andarist Thanks, well, it's a funny issue 😆. The babel plugin is using a recursive logic, so does the source code it's trying to explore. Let's see how I can fix that.

[jamesplease]

It looks like @oliviertassinari figured it out, and got this released as babel-plugin-transform-react-remove-prop-types@0.4.14.

Thank you both! I don't think I would have been able to figure this out without the two of you!