No handler found on any channel for message

Question

I am a total noob and have been trying to get VSTS Work Item Field values into my VSTS Extension and have been hitting an issue. Whenever I load my extension in my browser this is the following error message that I am getting:

No handler found on any channel for message: {"id":2,"methodName":null,"instanceId":"sample-extension-page","instanceContext":{[RETRACTED]},"params":null,"jsonrpc":"2.0"}

I have scoured the internet and have not been able to find out what my issue is. I just want to pass in my active Work Item field values for System.Id and System.Title so I can display them on my extension page/form. Any help would be appreciated, thanks!

Script in my html page:

<script type="text/javascript">
    console.log("VSS Initialize...");
    VSS.init({
        usePlatformScripts: true,
        explicitNotifyLoaded: true,
        usePlatformStyles: true,
        configureModuleLoader:true
    });

    console.log("VSS Ready.");
    VSS.ready(function(){
    console.log("VSS REQUIRE");
    VSS.require(["TFS/WorkItemTracking/Services"], function(_WorkItemServices) {
        console.log("Inside VSS REQUIRE.");
        // Get the WorkItemFormService.  This service allows you to get/set fields/links on the 'active' work item (the work item
        // that currently is displayed in the UI).
        console.log("GET WORK ITEM FORM SERVICE");
        function getWorkItemFormService(){
            console.log("Inside GET WORK ITEM FORM SERVICE!");
            return _WorkItemServices.WorkItemFormService.getService();
        }

        // VSS.register(VSS.getContribution().id, function(){
        console.log("VSS REGISTER.");
        console.log("VSS Contribution ID === " + VSS.getContribution().id);
        VSS.register(VSS.getContribution().id, function(){
            console.log("Inside VSS REGISTER");
            return {
                // Called when the active work item is modified
                onFieldChanged: function(args) {
                    $(".events").append($("<div/>").text("onFieldChanged - " + JSON.stringify(args)));
                },

                // Called when a new work item is being loaded in the UI
                onLoaded: function(args){
                    console.log("onloaded");
                    getWorkItemFormService().then(function(service) {
                        service.getFieldValues(["System.Id","System.Title"]).then(function(value){
                            $(".events").append($("<div/>").text("onLoaded - " + JSON.stringify(value)));
                            console.log("WORK ITEM VALUES : " + JSON.stringify(value));
                        });
                    });
                },

                // Called when the active work item is being unloaded in the UI
                onUnloaded: function(args) {
                    console.log("onunloaded.");
                    $(".events").empty();
                    $(".events").append($("<div/>").text("onUnloaded - " + JSON.stringify(args)));
                },

                // Called after the work item has been saved
                onSaved: function (args) {
                    $(".events").append($("<div/>").text("onSaved - " + JSON.stringify(args)));
                },

                // Called when the work item is reset to its unmodified state (undo)
                onReset: function (args) {
                    $(".events").append($("<div/>").text("onReset - " + JSON.stringify(args)));
                },

                // Called when the work item has been refreshed from the server
                onRefreshed: function (args) {
                    $(".events").append($("<div/>").text("onRefreshed - " + JSON.stringify(args)));
                }
            }
        });
    });
    });

vss-extension.json file:

{
"manifestVersion": 1,
"id": "sample-extension",
"version": "0.1.64",
"name": "sampleextension",
"displayName":"Sample Extension",
"description": "Sample Extension",
"publisher": "[RETRACTED]",
"contentType":"application/json",
"targets": [
    {
        "id": "Microsoft.VisualStudio.Services"
    }
],
"icons": {
    "default": "images/icon.png"
 },
"contributions": [
    {
        "id": "sample-extension-page",
        "type": "ms.vss-work-web.work-item-form-page",
        "description": "Sample extenion page",
        "targets": [
            "ms.vss-work-web.work-item-form"
        ],
        "properties": {
            "name": "sample-extenion-page",
            "uri": "hello-world.html"
        }
    }
],
"scopes": [
    "vso.work"
],
"files": [
    {
        "path": "scripts", "addressable": true
    },
    {
        "path": "sdk/scripts", "addressable": true
    },
    {
        "path": "images/icon.png", "addressable": true
    },
    {
        "path":"hello-world.html","addressable":true
    }
]
}

Answer 1

I had a similar issue... But it was user error. I was registering this on my configuration page:

VSS.register("HelloWorldWidget.Configuration", function () {   

And then in my manifest I had:

     {
         "id": "TestWaffleWidget.Configuration",
         "type": "ms.vss-dashboards-web.widget-configuration",
         "targets": [ "ms.vss-dashboards-web.widget-configuration" ],
         "properties": {
             "name": "HelloWorldWidget Configuration",
             "description": "Configures HelloWorldWidget",
             "uri": "configuration.html"
         }
     }

This doesn't reconcile ("HelloWorldWidget.Configuration" and "TestWaffleWidget.Configuration" don't match) and then throws the "No handler found on any channel for message" error.

It looks like you might be falling into the same issue. You're registering:

VSS.register(VSS.getContribution().id, function(){

But unless VSS.getContribution().id matches "sample-extension-page" from your manifest, it's going to throw the no handler error.