Dijit: Why am I getting an "Uncaught Error: Invalid Template"?

Question

I have a dijit that looks fine as far as I can tell, but it is raising Uncaught Error: Invalid template every time. I have not been able to figure out why. All variables (e.g. ${variableName} are defined in the widget correctly.

Here is the widget:

<div class="${classPrefix}-wrapper">
    <div class="${classPrefix} flair" dojoAttachPoint="flairNode"></div>
    <div class="${classPrefix}-count hidden" dojoAttachPoint="countWrapperNode">
        <div class="count" dojoAttachPoint="countNode">0</div>
    </div>
    <div class="${classPrefix} ${secondaryClass} action hidden" dojoAttachPoint="secondaryClickNode" dojoAttachEvent="onclick:_onSecondaryClick">
        <div class="${classPrefix}-inner"></div>
        <div class="${classPrefix}-icon"></div>
    </div>
    <div class="${classPrefix} ${primaryClass} action" dojoAttachPoint="primaryClickNode" dojoAttachEvent="onclick:_onPrimaryClick">
        <div class="${classPrefix}-inner"></div>
        <div class="${classPrefix}-icon"></div>
    </div>
    <div class="${classPrefix}-message hidden" dojoAttachPoint="messageNode"></div>
</div>
<div class="${actionPromptNodeClass}" dojoAttachPoint="actionPromptMessageNode">
    <span dojoAttachPoint="actionPromptMessage">${actionPromptText}</span>
    <span dojoAttachPoint="actionCompletedMessage" class="hidden">${actionCompletedText</span>
</div>

Answer 1

Found the answer to my question. It turns out that you can only have one root node in a Dijit. I missed this in the docs, but it is at the bottom of this tutorial:

Common Pitfalls

• Be sure to only have one root node in your template
• Don’t start or end your template with a comment because that means you technically have two nodes
• Avoid a trailing </div> at the end of your template

Answer 2

There may be only one root element in the template. Wrap your template into <div></div> and it should work.