Uncaught TypeError: Survey.CustomWidgetCollection.Instance.add is not a function

Hey folks,

I'm following the documentation given at https://surveyjs.io/Documentation/Survey-Creator/?id=Create-Custom-Widget#newquestion

to try and create a new question type (rich text).

However, I'm running into this issue where I get

Uncaught TypeError: Survey.CustomWidgetCollection.Instance.add is not a function

How do I go about solving this?

SurveyCreator
    .StylesManager
    .applyTheme("bootstrap");

var options = {};
//create the SurveyJS Creator, but do not render it yet.
var creator = new SurveyCreator.SurveyCreator(null, options);
//Show toolbox in the right container. It is shown on the left by default
creator.showToolbox = "left";
//Show property grid in the right container, combined with toolbox
creator.showPropertyGrid = "right";
//Make toolbox active by default
creator.rightContainerActiveItem("toolbox");

//Add a new tab as the first one
creator
    .tabs()
    .unshift({
        name: "survey-templates", //the unique tab name
        title: "Custom Tab", //the tab title
        template: "custom-tab-survey-templates", //you will see the knockout template in the HTML tab
        action: function() {
            //change the active tab to this one on clicking the tab
            creator.makeNewViewActive("survey-templates");
        },
        data: {
            title: "Custom Tab",
            // surveys: loadedSurveyTemplates(), //to make code clean, get the array of templates name and jsons from another function
            load: function(item) {
                //load the item json into creator
                creator.JSON = item.json;
                //make the 'designer' tab active
                creator.makeNewViewActive("designer");
            }
        }
    });

//Render Creator in div with id equals to "creatorElement"
creator.render("surveyEditorContainer");

//set function on save callback
creator.saveSurveyFunc = saveMySurvey;

function saveMySurvey() {
    var yourNewSurveyJSON = creator.text;
    //send updated json in your storage
    alert(yourNewSurveyJSON);
}
var jsons = [];

var richEditWidget = {
    name: "richedit",
    title: "Rich Editor",
    iconName: "icon-editor",
    widgetIsLoaded: function() {
        return true; //We do not have external scripts
    },
    isFit: function(question) {
        return question.getType() == "richedit";
    },
    init() {
        Survey.Serializer.addClass("richedit", [], null, "empty");
    },
    htmlTemplate: '<div>\
      <div>\
        <button onclick="document.execCommand(\'bold\')">Bold</a>\
        <button onclick="document.execCommand(\'italic\')">Italic</a>\
        <button onclick="document.execCommand(\'insertunorderedlist\')">List</a>\
      </div>\
      <div class="widget_rich_editor" contenteditable=true style="height:200px"></div>\
    </div>',
    afterRender: function(question, el) {
        var editor = el.getElementsByClassName("widget_rich_editor");
        if (editor.length == 0) return;
        editor = editor[0];
        editor.innerHTML = question.value || "";
        var changingValue = false;
        var updateQuestionValue = function() {
            if (changingValue) return;
            changingValue = true;
            question.value = editor.innerHTML;
            changingValue = false;
        };
        if (editor.addEventListener) {
            var types = [
                "input",
                "DOMNodeInserted",
                "DOMNodeRemoved",
                "DOMCharacterDataModified",
            ];
            for (var i = 0; i < types.length; i++) {
                editor.addEventListener(types[i], updateQuestionValue, false);
            }
        }
        question.valueChangedCallback = function() {
            if (changingValue) return;
            changingValue = true;
            editor.innerHTML = question.value || "";
            changingValue = false;
        };
        var updateReadOnly = function() {
            var enabled = !question.isReadOnly;
            var buttons = el.getElementsByTagName("button");
            for (var i = 0; i < buttons.length; i++) {}
        };
        updateReadOnly();
        question.readOnlyChangedCallback = function() {
            updateReadOnly();
        };
    },
};

Survey.CustomWidgetCollection.Instance.add(
    richEditWidget,
    "customtype"
);

surveyjs / custom-widgets

Uncaught TypeError: Survey.CustomWidgetCollection.Instance.add is not a function #271