Cannot read PluginName of undefined

Question

I'm currently trying to make a Alchemy plugin which will allow my users to pick a focus point on an image. This is so we can adjust the resizing behaviour on that focus point.

My alchemy extensions works on the ComponentView with a RibbonToolbar Button. That Ribbon toolbar button needs some info out of my custom settings. I created a Settings wrapper that will get all my custom settings and stores them so that my isEnabled can access those. The Alchemy.Plugins["${PluginName}"].Api.getSettings gets called in a $display "load" event listener to be sure it is loaded before I call it.

However I get following error, and when I look at the stack trace it seems that it has nothing to do with code that I have written.

Does anybody have an idea what I did wrong?

The Alchemy version I am using is 0.8.3.0 and I am using/testing it on a clean Web 8.1 with only DXA installed.

---

Extra: To be more clear what my settings wrapper does, I have put it here. The purpose of this wrapper is so that my settings are available synchronously instead of getting them through a promise. As far as I know, the 'isAvailable'/'isEnabled' in a command will not accept a promise as return value.

(function (window, document) {
    "use strict";
    window.Company = window.Company || {};
    window.Company.Plugins = window.Company.Plugins || {};
    window.Company.Plugins.ImageFocus = window.Company.Plugins.ImageFocus || {};
    window.Company.Plugins.ImageFocus = (function(window, document, self) {    
        var oAlchemy = window.Alchemy;
        var oSettings = {};
        function fnOnInitializeFailed(error) {
            console.error("There was an error", error);
        }
        function fnProcessSettings(settings) {
            //Settings get processed in a more json friendly way.
        }
        function fnInitialize() {
            try {
                oAlchemy.Plugins["${PluginName}"].Api.getSettings()
                    .success(function(settings) {
                        fnProcessSettings(JSON.parse(JSON.stringify(settings)));
                    })
                    .error(function(error) {
                        fnOnInitializeFailed(error);
                    });
            } catch (error) {
                fnOnInitializeFailed(error);
            }
        }
        function fnIsSchemaAllowed(tcmuri) {
            return (oSettings && oSettings.schemas && oSettings.schemas[tcmuri]) || false;
        }
        function fnGetFieldForSchema(tcmuri) {
            return oSettings && oSettings.schemas && oSettings.schemas[tcmuri];
        }
        self.isSchemaAllowed = fnIsSchemaAllowed;
        self.getFieldForSchema = fnGetFieldForSchema;
        window.$display.addEventListener("load", fnInitialize.bind(this));
        return self;
    })(window, document, window.Company.Plugins.ImageFocus);
})(window, document);

And to clarify even more: The code where it breaks on at the moment (the one in the screenshot, is Alchemy Generated Code. It does not get called by me, it is just there already.

Answer 1

Alchemy actually includes a method in its API to retrieve the settings for you, which should help you avoid this issue, and also save you from having to use a library, if this is all qwest is doing for you. Replacing the snippet you've got pictured with something like this should do the trick for you.

function getSettings() {
        Alchemy.Plugins["${PluginName}"].Api.getSettings()
                .success(function (settings) {
                    return JSON.stringify(settings);
                })
                .error(function () {
                    console.log("There was an error", error.message);
                })
                .complete(function () {
                });
    }