typescriptazure-devopsambient

To reference VSS.SDK in typescript. Error : VSS is not defined

I am trying to use vss-web-extension-sdk from node_modules, when I compile the project is compiled.

But when I upload it says; enter image description here

A small piece of code from a typescript file

VSS.init({
        explicitNotifyLoaded: false,
        usePlatformStyles: true,
        usePlatformScripts: true
    });

Directory structure of vss-web-extension-sdk (under node_modules)

enter image description here

I also tried to reference and import the sdk where I use it, but could not make things work. My attemps as below and errors that I got as following...

/// <reference path = "../../../node_modules/vss-web-extension-sdk/typings/index.d.ts/" />

Error : File '.../node_modules/vss-web-extension-sdk/typings/index.d.ts/' is not under 'rootDir' '.../src'. 'rootDir' is expected to contain all source files.ts(6059)

import  "../../../node_modules/vss-web-extension-sdk"

Error: Module not found: Error: Can't resolve '../../../node_modules/vss-web-extension-sdk' in ...

import "vss-web-extension-sdk"

Error: Module not found: Error: Can't resolve 'vss-web-extension-sdk' in ...

Solution

  • I include and initialize VSS.SDK in the html file then I am able to use it from .tsx files too.

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
    <script src="../../lib/VSS.SDK.min.js"></script>
</head>
<body>
    <script type="text/javascript">
        // Initialize the VSS sdk
        VSS.init({
            explicitNotifyLoaded: true,
            usePlatformScripts: true
        });
        VSS.ready(function () {
            VSS.register(VSS.getContribution().id, function (context) {
                return {
                    // ...
                  };
            });

            VSS.notifyLoadSucceeded();
        });
    </script>
    ...
    ...
    ...
</body>
</html>

    NOTE: If you get

    Resource blocked due to MIME type mismatch (X-Content-Type-Options: nosniff)

    after referencing the SDK from HTML file, look at this answer

    https://stackoverflow.com/a/41319855/9851619