[Solved] Uncaught TypeError: SP.ClientContext is not a constructor in SharePoint Online JSOM (JavaScript object model)

In this SharePoint JSOM tutorial, I will explain how to solve Uncaught TypeError: SP.ClientContext is not a constructor error which 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 which says: sp.clientcontext is not a constructor. When we do F12 in the browser, the details error coming as:

Uncaught TypeError: SP.ClientContext is not a constructor at 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 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>

You may like following SharePoint jsom tutorials:

• Upload multiple attachments to list items using JSOM and REST API in SharePoint online
• How to create a list using jsom (JavaScript object model) in SharePoint?
• Read, create, update, delete file using JavaScript object model (jsom) in SharePoint
• SharePoint crud operations using jsom (JavaScript Object Model)
• Create SharePoint site programmatically
• Add user to SharePoint group programmatically
• SharePoint Online jsom examples

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.