Loading files through goog.require in a script block fails

Question

When using goog.require inside a <script> tag to load a script, the specified files aren't loaded. For example:

<script>
goog.require('goog.dom');
var mydiv = goog.dom.$('foo');
</script>

Gives:

goog.dom is undefined

What's wrong with this usage?

Answer 1

The problem is that goog.require dynamically adds the required script tags to the document after the current script tag. So, for example:

<script>
goog.require('stuff');

doSomething();
</script>

Translates to:

<script>
goog.require('stuff');

doSomething();
</script>
<script src=[included stuff] type="text/javascript"></script>

The solution is to have a separate script tag for requirements:

<script>
goog.require('stuff');
</script>

<script>
doSomething();
</script>