How to deal with goog.inherits() giving "goog.ui is undefined"

Google released the Javascript Closure Tools last week, to my delight. It's the tools behind most of Google's Apps, notably GMail.

I love playing with these great tools that I didn't have time to deal with before.

Being a novice with these tools, I ran into some problems pretty quickly. I'm posting our team's solution to one here, hoping either (a) someone will explain the root of this, and/or (b) others will benefit from the same instant workaround.

Closure provides a convenient Javascript class inheritance method called goog.inherits(), like so:

goog.inherits('ACTG.Ui.ScriptListing', 'goog.ui.tree.TreeControl');

In our HTML file, we have the expected scripts loaded:

<script type="text/javascript" src="path_to_closure/base.js"/>
<script type="text/javascript" src="path_to_our_js_which_has_the_goog.inherits/our.js"/>

This results in "goog.ui is undefined", with Firefox Shiretoko in particular. As some of my former colleagues would say, "How can?"

Turns out this is fixed with:

<script type="text/javascript" src="path_to_closure/base.js"/>
<script type="text/javascript">
goog.require('goog.ui.tree.TreeControl');
</script>
<script type="text/javascript" src="path_to_our_js_which_has_the_goog.inherits/our.js"/>

I think I understand why, but I'm not sure. Still, the workaround works, and there isn't time to explain every mystery in the universe.

And for actual deployment, if you use calcdeps.py to package and minify everything into a single js file, this workaround would be unnecessary.