Maximum call stack exceeded - isStatelessComponent fn

[jamesplease]

Note: originally opened this issue here and then here on my quest to find the cause.

👋 Hey there! I'm running into an issue with this library, and I'm wondering if there's anything that we can do.

The Problem

I am getting a maximum call stack exceeded when using this transform. Note that I'm using Rollup, but it was determined here that the problem is this lib.

The specific error that Rollup outputs 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

but the actual error 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)

@Andarist's recommendation:

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.

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"

---

Thanks for reading!

[oliviertassinari]

@jamesplease Thanks for the report!