Uncaught RangeError: Maximum call stack size exceeded

[cidevant]

Hi there,

I used your example 03-build-systems to create my own build system. Everything works great, except of case, when I am importing components from react-bootstrap package.

This error i produced by this plugin in code section

function initModules() {
  var allExports = window.__livereactload$$.exports;
  var modules = window.__livereactload$$.modules;
  // initialize Browserify compatibility
  Object.keys(modules).forEach(function (id) {
    modules[id][0] = function (require, module, exports) {
      if (typeof allExports[id] !== "undefined") {
        module.exports = allExports[id].exports;
      } else {
        var __init = new Function("require", "module", "exports", modules[id].source);
        var _require = function _require() {
          return require.apply(require, Array.prototype.slice.call(arguments).concat(id));
        };
        __init(_require, module, exports, arguments[3], arguments[4], arguments[5], arguments[6]);
      }
    };
    modules[id][1] = modules[id].deps;
  });
}

on line var __init = new Function("require", "module", "exports", modules[id].source);

I looked in react-boostrap module, and find out "strange way" of exporting node modules:

var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default'];
var _Alert2 = require('./Alert');
var _Alert3 = _interopRequireDefault(_Alert2);
exports.Alert = _Alert3['default'];

So I added browserify-shim to import non standard imports, but it still does not work.

Here is my repo (improved build system based on your example 03-build-systems) which easy to install and run:

• repo: https://github.com/cidevant/tabula-rasa-build-system
• install: make configure
• run: make run

To invoke error, just uncomment line 3 in /src/scripts/init.js.

Thank you for your attention,

Cidevant

[milankinen]

Nice observation and example. I'll check this out.

[srsholmes]

I can also replicate this behaviour when doing imports from an index.js file.
Index.js looks like this:

export { default as App } from './App.jsx';
export { default as Component } from './Component.jsx';

and my App.jsx imports using import { Component } from './';

The import is fine however when imported directly from the component using import Component from './Component.jsx';

My Component file is:

let React = require('react');
let Component = React.createClass({
  render(){
    return (
      <div>
        <p>Component</p>
      </div>
    )
  }
});

export default Component;

Hope that helps with your investigation, I am going to look in to it.

[milankinen]

Okay... The problem was that react-bootstrap had a circular dependency between Button and ButtonInput modules, which caused the stack overflow. It should be fixed now with commit 0e8dd4e

[milankinen]

Should be fixed in 2.0.2

[rhalukongor]

Seems 2.0.2 introduced uninitialised 'default' exports. In my case redux code throws the following error:
_utilsIsPlainObject2['default'] is not a function, I suspect error message would differ in other scenarios. I can confirm that it is introduced in this version since 2.0.1 works fine (I double checked). Also the following line in the callstack:
__init(_require, module, exports, arguments[3]...
causes the error, also posted by the OP.

[milankinen]

Damn.. Very sloppy actions from me. I can also re-produce this with my own redux example. Fix coming soon..

[milankinen]

It seems that I broke the handling of de-duplicate modules. This should be fixed now in 2.0.4

[rhalukongor]

I'm happy to confirm 2.0.4 works as intended for my part. Thank you for the effort.

[srsholmes]

Yeah, for my example, ver 2.0.4 also fixed my issue. Thanks very much for fixing this, really great work.

[milankinen]

Thanks guys! Closing this one.

[cidevant]

Yes, works for me !))) But I have new issue ) Will post it soon )