Why you might be getting "Maximum Call Stack Size Exceeded" error


Hi everyone. I upgraded from RC3 to Ionic 2.0.1 and found strangely that my project wouldn’t load. In fact I couldn’t even get a useful error except for the mysterious “Maximum call stack size exceeded”. I opened up Chrome dev tools and found the error in the console. It pointed to the ten-thousandth something line of a rather large main.js file.

I thought I was really in the deep!

But I found the solution.

This error has to do with webpack. I know virtually nothing about web pack except what the name implies. I think its a tool which gets executed when you run ionic serve and its purpose is to pack all your .ts files into raw javascript, making them accessible to the application.

The problem was caused because I had a bunch of .ts files in a folder and then an index.ts file which exported them all so I could include all the features as a module. I had the usual export * from './subfile.ts' but then I had right at the top export * from './index.ts'! This is indeed a circular dependency! In RC3 this compiled fine however in the new app scripts, the error manifested itself; unfortunately without very good error message.

To diagnose this, I set a breakpoint on the line which was failing in main.js. Then when the breakpoint hit, I followed step by step until the callstack ended. The very last line which the debugger showed was some kind of webpack import of one of my modules. I checked this module and found the circular dependency. Removing the line allowed my entire app to run!

If you have a similar problem and find a different solution, post it below.

Lets create a library of common ways this error can be triggered so future users don’t have to waste time