“(AppContainer)RangeError: Maximum call stack size exceeded”

[murbanowicz]

I am struggling with really strange error and I did not find the solution for last 2 hours so I decided to ask for help.

I have setup of React, Redux, Webpack, React Hot Loader, all with TypeScript.

I have used a boilerplate, but after I ran into this issue I changed webpack config to reflect example from RHL repo.

It is compiling properly but I cannot get protected route working because if user is authenticated, so it is supposed to render provided component, it is throwing error from the title of this question.

This is my ProtectedRoute component:

import React, { Component, FunctionComponent } from 'react';
import { Redirect, Route } from 'react-router';
import { isAuthenticated } from './auth';

interface IProps {
  component: Component | FunctionComponent;
  path: string;
}
const ProtectedRoute: FunctionComponent<IProps> = ({ component, ...rest }) => (
  <Route
    {...rest}
    render={(props) => {
      if (isAuthenticated()) {
        console.log('should render', component);
        return <Component />;
      }
      return <Redirect to="/login" />;
    }}
  />
);

export default ProtectedRoute;

Simple like that.

I am trying to just use:

<ProtectedRoute path="/dashboard" component={() => <div>Test</div>} />

isAuthenticated is a crazy simple function so far:

export const isAuthenticated = () => {
  const accessToken = localStorage.getItem(ACCESS_TOKEN_STORAGE_KEY);
  console.log('checking auth');
  if (accessToken) {
    return true;
  }
  return false;
};

I can pass anything to the protected route and it will always throw:

(AppContainer)RangeError: Maximum call stack size exceeded

This is the call stack:

react-hot-loader.development.js?2cd8:2202 Uncaught RangeError: Maximum call stack size exceeded
at renderReconciler (react-hot-loader.development.js?2cd8:2202)
at Object.asyncReconciledRender [as componentWillRender] (react-hot-loader.development.js?2cd8:2220)
at Component.hotComponentRender (react-hot-loader.development.js?2cd8:718)
at Component.proxiedRender (react-hot-loader.development.js?2cd8:750)
at Component.hotComponentRender (react-hot-loader.development.js?2cd8:730)
at Component.proxiedRender (react-hot-loader.development.js?2cd8:750)
at Component.hotComponentRender (react-hot-loader.development.js?2cd8:730)
at Component.proxiedRender (react-hot-loader.development.js?2cd8:750)
at Component.hotComponentRender (react-hot-loader.development.js?2cd8:730)
at Component.proxiedRender (react-hot-loader.development.js?2cd8:750)

I have really no idea what is going on.

I have tried to change the config:

setConfig({
    logLevel: 'debug',
    ignoreSFC: true, // the same error
    pureRender: true // change error to instance.render is not a function
  });

but it does not help.

I will really appreciate any help.

[theKashey]

1. There is definitely something wrong with RHL code
2. There is a small mistake in your one

<ProtectedRoute path="/dashboard" component={() => <div>Test</div>} />
// should be
const Component = () => <div>Test</div>;
<ProtectedRoute path="/dashboard" component={Component} />

Right now you are creating a new component every render. Dont do it.

[murbanowicz]

This is the repo with replicated issue: https://github.com/murbanowicz/rhl-issue

[theKashey]

const ProtectedRoute: FunctionComponent<IProps> = ({ component, ...rest }) => (
  <Route
    {...rest}
    render={(props) => {
      if (isAuthenticated()) {
        return <Component />; <<---- this is React.Component, which does not have .render method
      }
      return <Redirect to="/login" />;
    }}
  />
);

Replace Component by a component