Dojo build fails on IE9 when loading layer from HTML header: property 'dir' is undefined

Question

I've made a dojo build, but I wanted the flexibility when enabling/disabling the build, so I've tried to load in in <script> tags in HTML header:

<script src="js/config.js"></script>
<script src="/dojo/1.9/dojo/dojo.js" data-dojo-config="async: true"></script>
<script src="/dojo/1.9/dojo/dojo-all.js"></script>

and I've left my JS file unmodified. It seems to function, however, there was a problem, but only on IE9, and only on application version deployed on WebSphere (I've tested on Apache2). The problem was, that property 'dir' was undefined, in that particular code fragment:

    geom.isBodyLtr = function isBodyLtr(doc) {
        doc = doc || win.doc;
        return (win.body(doc).dir || doc.documentElement.dir 
           || "ltr").toLowerCase() == "ltr";
    };

After some searching for similar problems (such as this: How to prevent "Unable to get value of the property 'dir': object is null or undefined" error when loading pages in IE9), I've detected it can be some loading sequence problem. I've removed the layer from the HTML header, and loaded it in my JS in the following sequence:

require(["dojo/domReady!"], function(){
// load the layers, but only after document is ready
require(['dojo/dojo-all'], function(){

require(["dojo", "dojo/on", "dojo/dom-attr", "dojo/dom-class", (... and hundred more) 

However, I know that people are loading builds in HTML header, for example from topic here: Dojo Builds...? What now?

So my question is, am I doing something wrong, or that trick with HTML header is not guaranteed to work on all browsers?

This is my build script config:

'dojo/dojo': {         
    include: ['dojo/dojo', 'dojo/domReady', 'dojo/_base/declare'],         
    boot: true,         
    customBase: true    
},
'dojo/dojo-all': {
    include: ["dojo/on", "dojo/dom-attr", "dojo/dom-class", "dojo/query", "dojo/_base/lang", "dojo/request/xhr", 
    "dijit/registry","dijit/form/TextBox", "dijit/form/Textarea", "dijit/form/ComboBox", "dijit/form/FilteringSelect", "dijit/form/CheckBox", "dijit/form/Button",
    "gridx/core/model/cache/Sync", "gridx/Grid", "gridx/modules/SingleSort", "gridx/modules/ColumnResizer", 
    (...and hundred more)],
    boot: false, // exclude bootstrap modules
    customBase: false
},

and this is the build.bat from dojo:

java -Xms256m -Xmx256m  -cp "%~dp0../shrinksafe/js.jar";"%
~dp0../closureCompiler/compiler.jar";"%~dp0../shrinksafe/shrinksafe.jar" 
org.mozilla.javascript.tools.shell.Main  "%~dp0../../dojo/dojo.js" 
baseUrl="%~dp0../../dojo" load=build %*

Answer 1

We've recently had the same sort of problem with the order of layer files loading. To get it working with IE9, you really need to take control over the order of layer file loading, so yes, the simplest and most reliable approach is to require your layer files rather than using <script> to load them.

Check out the sample at the bottom of this page which contains a require nested inside another require:

http://www.sitepen.com/blog/2012/06/11/dgrid-and-dojo-nano-build/

We've just made exactly the same changes in a product here to avoid sporadic failures with IE9 and IE10 (with 7 layer files, one of which needed to override an older version of a module defined in one of the others). <script> had seemingly worked fine for some time, but it turned out that we couldn't rely on it.