hellomoto hellomoto - 7 months ago 46
Javascript Question

How do I fix a "too much recursion" error in ReactJS?

I'm trying to create a NavBar for my web application. When I go to open

index.html
nothing loads up. When I check the web console in firefox it gives me this error:

too much recursion
if I click into it it gives me this;

require<[357]</</ReactCompositeComponentMixin.getName() vendors.js:29036
getDeclarationErrorAddendum() vendors.js:33167
checkPropTypes() vendors.js:33322
validatePropTypes() vendors.js:33342
require<[385]</</ReactElementValidator.createElement() vendors.js:33376
render()
require<[357]</</ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext() vendors.js:28968
require<[357]</</ReactCompositeComponentMixin._renderValidatedComponent() vendors.js:28988
require<[404]</</ReactPerf.measure/wrapper() vendors.js:35387
require<[357]</</ReactCompositeComponentMixin.performInitialMount() vendors.js:28573
require<[357]</</ReactCompositeComponentMixin.mountComponent() vendors.js:28526
require<[404]</</ReactPerf.measure/wrapper() vendors.js:35387
require<[409]</</ReactReconciler.mountComponent() vendors.js:36055
require<[398]</</ReactMultiChild.Mixin.mountChildren() vendors.js:34750


There is more lines to this error, but I hope the first few lines will help in identifying the problem, if more are needed please let me know. I have also tried this on Chrome and it gives me
Error: Maximum call stack size exceeded
.

For anyone wondering what
vendor.js
and
bundle.js
are, they are the result of
gulp
building my javascript files together.

I think the problem is occurring because of an infinite loop somewhere, but I haven't used any so I think that the problem stems from my
Nav.js
file which is where I create the
Navbar


Nav.js:

import React from 'react';
import { Navbar, NavItem, MenuItem, NavDropdown } from 'react-bootstrap';

export default class Nav extends React.Component {

constructor() {
super();
this.state = {};
}

render() {
const navbarInstance = (
<Navbar inverse defaultExpanded={true}>
<Navbar.Header>
<Navbar.Brand>
<a href="#">Songshare</a>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1} href="#">Link</NavItem>
<NavItem eventKey={2} href="#">Link</NavItem>
<NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
<MenuItem eventKey={3.1}>Action</MenuItem>
<MenuItem eventKey={3.2}>Another action</MenuItem>
<MenuItem eventKey={3.3}>Something else here</MenuItem>
<MenuItem divider />
<MenuItem eventKey={3.3}>Separated link</MenuItem>
</NavDropdown>
</Nav>
<Nav pullRight>
<NavItem eventKey={1} href="#">Link Right</NavItem>
<NavItem eventKey={2} href="#">Link Right</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
);

return (
<div>
{navbarInstance};
</div>
);
}
}


I then import that class in my
MainLayout.js
like so;

import React from "react";

import Nav from "./layout/Nav";

export default class MainLayout extends React.Component {
render() {
return (
<div>
<Nav />
</div>
);
}
}


Finally I then import
MainLayout.js
in my
app.js


import React from "react";
import ReactDOM from "react-dom";

import MainLayout from "./pages/components/MainLayout";


const app = document.getElementById('app');

ReactDOM.render(<MainLayout />, app);


Since I saw that the error said something about
checkPropTypes()
, I tried adding this line to the end and I am still getting the same error. I got that idea from here

Nav.propTypes = { defaultExpanded: React.PropTypes.bool };

Answer

The problem here was that my component is called Nav. Later on I then have an element <Nav> which causes the confusion in React. I also forgot to import the <Nav> element at the top like this;import {Nav} from 'react-bootstrap'.