maximum call stack size exceeded in index.js

Question

I created a react app which complies perfectly but on running the web app on localhost ,the page keeps loading without rendering anything .Other than this ,I also got an error showing in visual studio code which says "maximum call stack size exceeded in index.js" .Here is the index.js file and other file assocaited wth it .

import React from 'react';
import ReactDOM from 'react-dom';
import AppRouter from './routers/AppRouter';

ReactDOM.render(<AppRouter />, document.getElementById('root'));

Here is the other file which lies in a folder routers .

import React from 'react';
import {BrowserRouter,Route,Switch} from 'react-router-dom';
import ExpenseDashboardPage from '../components/ExpenseDashboardPage.js';
import AddPage from '../components/AddPage.js';
import EditPage from '../components/EditPage.js';
import HelpPage from '../components/HelpPage.js';
import NotFoundPage from '../components/NotFoundPage.js'
import Header from '../components/Header.js'


console.log("working ");
    const AppRouter = ()=>(
        <BrowserRouter>
        <div>
        <Header/>
        <Switch>
         <Route path="/" component={ExpenseDashboardPage} exact={true}/>
         <Route path="/create" component={AddPage}/>
         <Route path="/edit/:id" component={EditPage} exact={true}/>
         <Route path="/help" component={HelpPage} exact={true}/>
         <Route  component={NotFoundPage}/>
        </Switch>
        </div>
        </BrowserRouter>
    );

    export default AppRouter;

I am updating the debugger console that I can see on visual studio code.

    Debugger listening on ws://127.0.0.1:47583/31bb1f1c-c7f5-49e3-82e6-ecbefb58d193
SyntaxError: Unexpected token import
vm.js:80
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:607:28)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Function.Module.runMain (module.js:684:10)
    at startup (bootstrap_node.js:187:16)
    at bootstrap_node.js:608:3
Debugger attached.
e:\demo\src\routers\AppRouter.js:1
(function (exports, require, module, __filename, __dirname) { import React from 'react';
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:607:28)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Function.Module.runMain (module.js:684:10)
    at startup (bootstrap_node.js:187:16)
    at bootstrap_node.js:608:3
Waiting for the debugger to disconnect...

hey can you help me with this as I am completely unaware of how to do this? — jammy, Feb 06 '18 at 11:47
What is a debugger and how can it help me? https://stackoverflow.com/questions/25385173/what-is-a-debugger-and-how-can-it-help-me-diagnose-problems — Matt Morgan, Feb 06 '18 at 11:48
errors like `"maximum call stack size"` are usually caused by unbounded recursive functions, which means that somewhere in your code, you probably have a recursive call you **don't** want to have. As the others comments suggested, [debugging](https://code.visualstudio.com/docs/editor/debugging) is the best way to know where the problem is. — cosh, Feb 06 '18 at 11:51
@isaac i learnt the debugger think where you linked me .Can you help me to resolve this now .I have updated the question with the debug console, — jammy, Feb 06 '18 at 13:27
@satyajeetjha that's a different error, so maybe you should post another question, but basically look: `SyntaxError: Unexpected token import` so somewhere in your code, you have a syntax error on your import statements. — cosh, Feb 06 '18 at 14:22

score 0 · Answer 1 · answered Feb 06 '18 at 11:53

Chances are that you're getting this error because something in your index.js has a circular dependency-- function a calls function b, but function b calls function a.

It could be a render call for a component, and that component contains its own parent, for example.

A debugger is a great suggestion, there are tutorials online on how to use one, and you could start with the SO post I mentioned in the comments. Here it is again: What is a debugger and how can it help me diagnose problems?

maximum call stack size exceeded in index.js

1 Answers1