sp.clientcontext is not a constructor - How to fix

In this SharePoint JSOM tutorial, I will explain how to solve Uncaught TypeError: SP.ClientContext is not a constructor error that comes in SharePoint Online/2013/2016 JSOM (JavaScript Object Model). The error SP.ClientContext is not a constructor that comes in a javascript object model (jsom) in SharePoint 2013 Online.

While working with the JavaScript object model (jsom) in SharePoint online site, I got an error that says: sp.clientcontext is not a constructor. When we do F12 in the browser, the details error comes as:

Uncaught TypeError: SP.ClientContext is not a constructor at a method name like this.

If you are working in a client object model in SharePoint online, we need to remember that to work with the JavaScript Object model we have to use SP.js file which is located in the LAYOUTS folder.

Microsoft provides SP.ClientContext constructor which is presented in SP.js. This constructor initializes a new instance of the ClientContext object for the specified SharePoint site.

Here I was using the below code to retrieve the lists and libraries available in the site using the javascript object model.

<div id=”divGetListData”></div>

<script>
$(function () {
getListData();
});

function getListData() {
var clientContext = new SP.ClientContext();
var oWebsite = clientContext.get_web();
this.collList = oWebsite.get_lists();
clientContext.load(collList);
clientContext.executeQueryAsync(
Function.createDelegate(this, this.onQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed)
);
}

function onQuerySucceeded() {
var listInfo = ”;
var listEnumerator = collList.getEnumerator();
while (listEnumerator.moveNext()) {
var oList = listEnumerator.get_current();
listInfo += ‘Title: ‘ + oList.get_title() + ‘ – Created: ‘ +
oList.get_created().toString() + ‘<br />’;
}
$(“#divGetListData”).html(listInfo);
}

function onQueryFailed(sender, args) {
alert(‘Request failed. ‘ + args.get_message() +
‘\n’ + args.get_stackTrace());
}
</script>

Uncaught TypeError: SP.ClientContext is not a constructor

In the above code it was not displaying the lists instead it was given the error as sp.clientcontext is not a constructor. If SP.ClientContext() executes before SP.js loaded in the page then the error will come. So we need to modify the code so that the getListData() method will call after SP.js loaded successfully.

The location of SP.js file is E:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\16\TEMPLATE\LAYOUTS

We can use ExecuteOrDelayUntilScriptLoaded method which will call the method after sp.js filed loaded in the page.

<div id=”divGetListData”></div>

<script>
$(function () {
ExecuteOrDelayUntilScriptLoaded(getListData, “sp.js”);
});

function getListData() {
var clientContext = new SP.ClientContext();
var oWebsite = clientContext.get_web();
this.collList = oWebsite.get_lists();
clientContext.load(collList);
clientContext.executeQueryAsync(
Function.createDelegate(this, this.onQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed)
);
}

function onQuerySucceeded() {
var listInfo = ”;
var listEnumerator = collList.getEnumerator();
while (listEnumerator.moveNext()) {
var oList = listEnumerator.get_current();
listInfo += ‘Title: ‘ + oList.get_title() + ‘ – Created: ‘ +
oList.get_created().toString() + ‘<br />’;
}
$(“#divGetListData”).html(listInfo);
}

function onQueryFailed(sender, args) {
alert(‘Request failed. ‘ + args.get_message() +
‘\n’ + args.get_stackTrace());
}
</script>

After this, the error sp.clientcontext is not a constructor did not come and it properly displays me the lists and libraries in SharePoint Online or SharePoint 2013/2016. Hope this will be helpful.