How to tackle ExtJS "Synchronously loading" warning

Question

When using ExtJS 4+ with asynchronous loading one would be familiar with this sort of warning:

[Ext.Loader] Synchronously loading 'MY.particular.module';
consider adding Ext.require('MY.particular.module') above Ext.onReady

How to identify which JavaScript module (be it a controller, a component, etc) is causing this warning? I.e. the place where include module being synchronously loaded in the requires list.

What is the right way to go around correcting these warnings? Does an automated way to do this exist?

P.S. The only way to do this right now, is to set a debug point where the warning is raised, and trace back to which line in which file is leading to the warning being generated.

Sternutatory

Answer 1

In chrome, in your stacktrace, (I think Firefox does stacktraces as well nowadays?) the file that is calling in a module is usually (always?) the 1st file that is not ext-all.

Ext.require is something used TO automate stuff ( eg js-minification) so you can't really automate it in and of itself.

When you declare a component ( using Ext.define or Ext.create ) you should be specifying the modules the component that Ext is going to use for the component with Ext.require ( well, if you want to get rid of this warning atleast )

Every custom component that you are using should more or less follow the same idea:

Ext.define('My.app.Panel', {
    extend: 'Ext.panel.Panel', // 
    requires: [
        'My.app.PanelPart2', //Hey! warning is gone!
        'My.app.PanelPart3'
    ]

    constructor: function (config) {
        this.callParent(arguments); 
        //...
    },

    statics: {
        method: function () {
            return 'abc';
        }
    }
});

And if you don't care about performance, and only want to get rid of stray warnings ( insanity technically, you can just muck your error message, in the loader config .

Ext.loader.setConfig({
  enabled: true,
  paths: {
      'My': 'my_own_path'
  },
  onError:function(){}//or custom handler? :D

See mitchsimeons answer: http://www.sencha.com/forum/showthread.php?178888-Tons-of-Synchronously-Loading-Warning-Messages

and a blog post on why requires: http://www.sencha.com/blog/using-ext-loader-for-your-application

Dermott

Answer 2

You should be including a requires config option in every module as a matter of good programming practice. Why are you not doing this?

Capias

I'm doing it. Just not doing it enough apparently. And as a matter of programming productivity, there usually exist ways to automate this part in compiled languages; unsure about interpreted languages though. – Sternutatory

+1 Josvic. That's what autoloader is for in Php and avoid tons of include, require, include_once and require_once everywhere... And avoid tons of rename when you move / or rename a file. – Eruct

Answer 3

I had the same problem, but fixed it today. Problem was that it didn't help to walk back the stacktrace, as there was no breakpoint in the code and I didn't know where to put the breakpoint.

So I've added a call to debugger ("debugger;") into the line of the ext-all-rtl-debug.js file the browser was complaining. So I had the stacktrace and found out where the problem occured. After that I've removed the debugger statement and everything worked as it should.

The problem with my code was that there was a store which neeeded a special class. I've added a "requires" property to the store, but it didn't help. I've had to add a "requires" property to the application.js file. This fixed the problem.

Tiger

Hey; I haven't used ExtJS in ages, and I can't mark your answer as correct. However leave it here, as people should upvote it in case its useful to them. Thanks! – Sternutatory