DevLabs-based Multi-Value Work Item Control Not Loading in Azure DevOps

Question

Question

We have created a custom work item control based on the DevLabs Multi-Value Control. The extension installs correctly and the HTML loads, but the control UI never appears. None of our initialization code runs, and the provider is never invoked. We would like guidance on resolving the module-loading issue that prevents the control from rendering.

Details

• The HTML file loads without issues.
• The JavaScript bundles inside dist/src do not load.
• SDK.init() and SDK.register() never execute.
• The provider function never runs, and the UI for the two selection components does not render.
• No error appears from our code because execution never reaches it.

Actual Behavior

RequireJS fails to resolve the compiled JavaScript bundles. The browser shows:

• 404 responses for module paths
• JSON returned instead of JS
• “No module found” errors

This prevents the extension from initializing.

Expected Behavior

• RequireJS should load the bundles under dist/src
• Initialization should run
• Provider should register
• The UI should render inside the Work Item form

What We Have Verified

• Packaging structure is correct
• Manifest loads the contribution
• The contribution appears in the correct tab
• Static assets load successfully
• Only JavaScript module loading is failing

What Is Not Related

Azure DevOps platform warnings (example: test-plans-license-data-provider) are unrelated and confirmed to be internal ADO messages.

What We Need From Microsoft

• Correct RequireJS path configuration for DevLabs-style extensions
• Expected baseUrl and folder layout for module resolution
• Confirmation of expected behavior of DevLabs extensions inside Azure DevOps
• Recommended steps to validate that bundles load correctly and UI initializes

Environment

Azure DevOps Server / Azure DevOps Services (cloud) Custom extension based on DevLabs Multi-Value Control Build output generated using standard Webpack to dist/src

Question

We have created a custom work item control based on the DevLabs Multi-Value Control. The extension installs correctly and the HTML loads, but the control UI never appears. None of our initialization code runs, and the provider is never invoked. We would like guidance on resolving the module-loading issue that prevents the control from rendering.

Details

• The HTML file loads without issues.
• The JavaScript bundles inside dist/src do not load.
• SDK.init() and SDK.register() never execute.
• The provider function never runs, and the UI for the two selection components does not render.
• No error appears from our code because execution never reaches it.

Actual Behavior

RequireJS fails to resolve the compiled JavaScript bundles.
The browser shows:

• 404 responses for module paths
• JSON returned instead of JS
• “No module found” errors

This prevents the extension from initializing.

Expected Behavior

• RequireJS should load the bundles under dist/src
• Initialization should run
• Provider should register
• The UI should render inside the Work Item form

What We Have Verified

• Packaging structure is correct
• Manifest loads the contribution
• The contribution appears in the correct tab
• Static assets load successfully
• Only JavaScript module loading is failing

What Is Not Related

Azure DevOps platform warnings (example: test-plans-license-data-provider) are unrelated and confirmed to be internal ADO messages.

What We Need From Microsoft

• Correct RequireJS path configuration for DevLabs-style extensions
• Expected baseUrl and folder layout for module resolution
• Confirmation of expected behavior of DevLabs extensions inside Azure DevOps
• Recommended steps to validate that bundles load correctly and UI initializes

Environment

Azure DevOps Server / Azure DevOps Services (cloud)
Custom extension based on DevLabs Multi-Value Control
Build output generated using standard Webpack to dist/src

Answer 1

It seems you are experiencing issues with the RequireJS module loading for your custom work item control based on the DevLabs Multi-Value Control in Azure DevOps. Here are some steps and considerations that might help you resolve the module-loading issue:

1. Check RequireJS Configuration: Ensure that your RequireJS configuration is correctly set up in your JavaScript files. You may need to specify the baseUrl in your RequireJS configuration to point to the correct directory where your JavaScript bundles are located (e.g., dist/src).
2. Verify Paths: Make sure that the paths defined in your RequireJS configuration match the actual paths of your JavaScript bundles. If you are getting 404 errors, it indicates that RequireJS cannot find the specified modules.
3. Inspect Network Requests: Use the browser's developer tools to inspect the network requests being made for your JavaScript bundles. Look for any 404 errors or unexpected responses (like JSON instead of JS) that might indicate misconfigured paths or issues with the server serving the files.
4. Manifest File: Double-check your extension's manifest file to ensure that it correctly defines the contributions and that the paths to your JavaScript files are accurate.
5. Webpack Output: Since you are using Webpack, verify that the output configuration in your Webpack setup is correct. Ensure that the output path matches what you expect and that the files are being generated as intended.
6. Debugging Initialization: Since SDK.init() and SDK.register() are not executing, you may want to add console logs or breakpoints in your initialization code to see if it is being reached. This might help you identify where the execution is failing.
7. Testing in Isolation: If possible, create a minimal version of your control to isolate the problem. This can help determine if the issue is with the control itself or with the environment/setup.
8. Consult Documentation: Review the Azure DevOps extension development documentation for any specific guidelines regarding DevLabs extensions and RequireJS configurations.

If you continue to experience issues, consider reaching out to the Azure DevOps community or support for more tailored assistance regarding your specific setup and configuration.

---

References:

• Add a custom control to the work item form
• Extensions overview

Answer 2

MS QA.pdf

Answer 3

Hi @Rajneesh Sheth

Thank you for reaching out to Microsoft Q&A

I tried creating custom multi-value DevTest like extension, and here are the steps I followed:

Here’s my Folder structure:

my-ado-extension/

dist > Inside dist

         ``> multivalue.html

         ``> src > my-control-bundle.js > styles.css

         > img > logo.png

vss-extensions.json

My my-control-bundle.js:

/**
 * Minimal DevLabs-style work item control provider in pure AMD (RequireJS).
 * No build tools required. Azure DevOps will load this via require.config(baseUrl: "src").
 */
define("my-control-bundle", [], function () {
  function create() {
    var root = document.getElementById("root");
    if (!root) {
      console.error("[DevLabs] #root not found in multivalue.html");
      return {
        getValue: function () { return {}; },
        onFieldChanged: function () {}
      };
    }
 
    root.innerHTML = ''
      + '<label>Option A:'
      + '  <select id="optA">'
      + '    <option>Alpha</option>'
      + '    <option>Beta</option>'
      + '    <option>Gamma</option>'
      + '  </select>'
      + '</label>'
      + '<br/>'
      + '<label>Option B:'
      + '  <select id="optB">'
      + '    <option>Red</option>'
      + '    <option>Green</option>'
      + '    <option>Blue</option>'
      + '  </select>'
      + '</label>';
 
    console.info("[DevLabs-style] provider.create invoked");
 
    // Minimal control contract expected by ADO Work Item form
    return {
      getValue: function () {
        var a = document.getElementById("optA");
        var b = document.getElementById("optB");
        return {
          optA: a && a.value,
          optB: b && b.value
        };
      },
      onFieldChanged: function (_field, _value) {
        // No-op for minimal sample
      }
    };
  }
 
  // Provider object returned to VSS.register(...)
  return {
    create: create
  };
});

My styles.css:

#root {
  font-family: Segoe UI, Arial, sans-serif;
  font-size: 13px;
  padding: 6px;
}
 
label {
  display: inline-block;
  margin: 6px 0;
}
 
select {
  margin-left: 8px;
  min-width: 140px;
}

My multivalue.html:

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Multi Value Control</title>
 
  <!-- Correct CSS include -->
  src/styles.css
 
  <!-- RequireJS (needed locally) -->
  https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js</script>
 
  <!-- Azure DevOps SDK -->
  https://unpkg.com/vss-web-extension-sdk/lib/VSS.SDK.min.js</script>
 
  <!-- Correct SDK include -->
  https://unpkg.com/vss-web-extension-sdk/lib/VSS.SDK.min.js</script>
 
  <script>
    // Configure RequireJS BEFORE VSS.init()
    require.config({
      baseUrl: "src", // resolves to dist/src/
      paths: {
        "my-control-bundle": "my-control-bundle" // omit .js
      }
    });
 
    VSS.init({ explicitNotifyLoaded: true });
 
    require(["my-control-bundle"], function (providerModule) {
      VSS.register("multivalue-control-provider", providerModule);
      VSS.notifyLoadSucceeded();
    });
 
    // Optional: trace module loads
    if (typeof requirejs !== "undefined" && requirejs.onResourceLoad) {
           requirejs.onResourceLoad = function (_ctx, map) {
        console.log("Loaded module:", map.name, "from", map.url);
      };
    }
  </script>
</head>
<body>
  <div id="root"></div>
</body>

My vss-extension.json:

{
  "manifestVersion": 1,
  "id": "my-custom-multivalue-control",
  "version": "0.0.1",
  "name": "My Custom Multi-Value Control (DevLabs-style)",
  "publisher": "siddhesh-publisher",
  "public": false,
  "targets": [{ "id": "Microsoft.VisualStudio.Services" }],
  "categories": ["Azure Boards"],
  "icons": { "default": "img/logo.png" },
  "files": [
    { "path": "dist", "addressable": true },
    { "path": "img",  "addressable": true }
  ],
  "contributions": [
    {
      "id": "multivalue-control",
      "type": "ms.vss-work-web.work-item-form-control",
      "targets": ["ms.vss-work-web.work-item-form"],
      "properties": {
        "name": "Multi Value Control",
        "uri": "dist/multivalue.html",
        "supportsReadOnly": true,
        "order": 10,
        "height": 160
      }
    }
  ]
}

Now, Install the tsix package and create vsix file with the command below:

# Install tfx-cli if not installed
npm i -g tfx-cli

# Create VSIX
tfx extension create --manifest-globs vss-extension.json

 Publish the created vsix file as the Extension in Visual studio marketplace:

https://marketplace.visualstudio.com/

Click on Publish extensions on Top Right > Create Publisher > Make sure the name of the Publisher and ID matched what you have added in the vss-extension.json.

Upload your vsix file and share the extension with your organization:

Visit your organization settings > Boards > Process > Select one Process > Select one Work Item, I have selected Task > Now > Select one Field > Add custom control > Select your custom extension and save Now, create a new Task in your work item the new custom field will be visible.