Question

After adding in the WidgetsInTemplateMixin, I am receiving an error

dest.appendChild is not a function

In the documentation, it claims that there will be an error if this.containerNode is not able to contain any child objects. However, I have marked the containerNode attachment point for a div with dojo type “dijit/layout/ContentPane”. Can anyone explain to me why this isn’t working?

Here is the Template file

<div class="${baseClass}">
    <div class="${baseClass}Container"
         data-dojo-type="dijit/layout/BorderContainer"
         data-dojo-props="design: 'headline'">
        <div data-dojo-type="dijit/layout/ContentPane"
             data-dojo-props="region: 'top'">
            Top
        </div>
        <div data-dojo-type="dijit/layout/ContentPane"
             data-dojo-props="region: 'center'"
             data-dojo-attach-point="containerNode">
        </div>
        <div data-dojo-type="dijit/layout/ContentPane"
             data-dojo-props="region: 'leading', splitter: true">
            Sidebar
        </div>
    </div>
</div>

Here is the javascript definition

define([
    "dojo/_base/declare",
    "dijit/_WidgetBase",
    "dijit/_OnDijitClickMixin",
    "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane",
    "dijit/layout/TabContainer",
    "dijit/_TemplatedMixin",
    "dijit/_WidgetsInTemplateMixin",
    "dojo/text!./templates/MainContainer.html"
], function (declare,
             _WidgetBase,
             _OnDijitClickMixin,
             BorderContainer,
             ContentPane,
             TabContainer,
             _TemplatedMixin,
             _WidgetsInTemplateMixin,
             template)
{

    return declare([_WidgetBase, _OnDijitClickMixin, _TemplatedMixin, _WidgetsInTemplateMixin], {

        templateString:template,
        baseClass:"main"
    });

});

The custom widget defined declaratively

<div data-dojo-type="main/ui/MainContainer" data-dojo-props="title: 'Main Application'">
  Hello Center!
</div>

Answer 1

Your question is worth researching. appendChild method only works with DOM Node. According to the source code, containerNode must be a DOM Node.

dijit/_TemplatedMixin.js

 _fillContent: function(/*DomNode*/ source){
    // summary:
    // Relocate source contents to templated container node.
    // this.containerNode must be able to receive children, or exceptions will be thrown.
    // tags:
    // protected
    var dest = this.containerNode;
        if(source && dest){
            while(source.hasChildNodes()){
            dest.appendChild(source.firstChild);
        }
    }
}, 

Look at this dijit/_WidgetBase.js. The comment shows that the type of containerNode is DomNode.

// containerNode: [readonly] DomNode
//      Designates where children of the source DOM node will be placed.
//      "Children" in this case refers to both DOM nodes and widgets.
//      For example, for myWidget:
//
//      |   <div data-dojo-type=myWidget>
//      |       <b> here's a plain DOM node
//      |       <span data-dojo-type=subWidget>and a widget</span>
//      |       <i> and another plain DOM node </i>
//      |   </div>
//
//      containerNode would point to:
//
//      |       <b> here's a plain DOM node
//      |       <span data-dojo-type=subWidget>and a widget</span>
//      |       <i> and another plain DOM node </i>
//
//      In templated widgets, "containerNode" is set via a
//      data-dojo-attach-point assignment.
//
//      containerNode must be defined for any widget that accepts innerHTML
//      (like ContentPane or BorderContainer or even Button), and conversely
//      is null for widgets that don't, like TextBox.
containerNode: null,

So, the containerNode has been desinged to be a DomNode, not a bug. It can’t be a widget. Maybe you should try some other ways.

Update:
Add some BorderContainers in custom widget

ModuleWithGuideBar.html

<div data-dojo-attach-point="containerNode" class="${class} ModuleWithGuideBar">
    <div class="ModuleGuideBar"
         data-dojo-type="dijit.layout.BorderContainer"
         data-dojo-props="region:'top', gutters:false"
         data-dojo-attach-point="guideBarFirst">
    </div>
    <div class="ModuleGuideBar"
         data-dojo-type="dijit.layout.BorderContainer"
         data-dojo-props="region:'top', gutters:false"
         data-dojo-attach-point="guideBarSecond">
    </div>
    <div class="ModuleContent"
         data-dojo-type="dijit.layout.BorderContainer"
         data-dojo-props="region:'center', gutters:false, liveSplitters:false"
         data-dojo-attach-point="moduleContent">
    </div>
</div>

Js file

define([
    "dojo/_base/declare",
    "dijit/layout/BorderContainer",
    "dijit/_TemplatedMixin",
    "dijit/_WidgetsInTemplateMixin",
    "dojo/text!./templates/ModuleWithGuideBar.html"

], function (declare, BorderContainer, TemplatedMixin, _WidgetsInTemplateMixin, template) {
    return declare("common.widget.ModuleWithGuideBar", [BorderContainer, TemplatedMixin, _WidgetsInTemplateMixin], {
        templateString:template,
        region:"center",
        gutters:false,
        guideBarFirst:null,
        guideBarSecond:null,
        moduleContent:null
    });
});