Debugging ExtJS errors after build

Question

I have an ExtJS app (I wont include source for now). When I run the Sencha CMD webserver in the root application directory everything works fine, as expected.

When I build the app (using sencha app build) and then run the Sencha CMD webserver in the build directory I get the error:

Uncaught TypeError: Cannot read property 'isComponent' of null app.js:1
Ext.cmd.derive.constructor                                     app.js:1
z                                                              app.js:1
(anonymous function)                                           app.js:1

I have created builds before that worked fine, and this is occuring after some recent changes I made (new build). I have checked all the normal suspects (requires, etc ...) and everything seems in order.

My question is: How do you debug this sort of issue since it works fine pre-build?

Versions: ExtJS 4.2.1, Sencha CMD 4.0.2.67, Error from Chrome Developer Tools

Try building the application using Sencha CMD and then deploy the build in a tomcat/apache server. — Vijay Sarin

overlordhammer overlordhammer · Accepted Answer · 2014-03-19T08:25:46

There is no easy way on debugging ExtJS (or any other Javascript) application after you have minified the code, although there are a few ways around that can help you on getting close to the source of your problem,

Build your application on testing mode sencha app build testing. Testing build is a non minified version of the normal build and you will be able to see human readable code that way. This should be enough for most cases.
Beautify your minified source code. Although testing build should work for most of the situations, I've experienced some cases where the testing code did work and the release version did not. Minified code beautification at least will isolate the line that throws the exception, although it could be hard to recognize since all the comments will be gone and variable names will look different as a result of the minification process, probably you will be able to recognize your code anyways since strings and Ext calls don't change.
You can try also using Source Maps (here's a neat article on the subject), you will need to change default yui compiler to closure compiler, however this is not a straight forward process, here's a detailed explanation on the command compiler options.

I hope this options can point you in the right direction.

Debugging ExtJS errors after build

1 Answers