Debugging ExtJS errors after build

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:

  • What do nested object literals mean in grunt.js files?
  • Why Ionic 2 builds are so large, even for small / blank apps?
  • Complette workflow for minifying and concatenating (angular) web apps with gulp
  • How to use webpack for development without webpack dev server?
  • jspm workflow for creating front-end libraries
  • Architecture: Combine several JavaScript projects (modular)
  • 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

  • Sublime Text 3: Build System - node.js. NPM module not executing
  • Architecture: Combine several JavaScript projects (modular)
  • `npm build` doesn't run the script named “build” in package.json
  • javascript obfuscation as part of build process
  • How can I exclude code path when bundling with webpack/browserify?
  • Grunt: custom task development how-to
  • One Solution collect form web for “Debugging ExtJS errors after build”

    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.