'Sharepoint JSOM - Get List Items - Uncaught ReferenceError: Type is not defined

I have a customer web page added to my sharepoint site and i'm trying to retrieve items from a sharepoint list, but i keep getting a error. I am not sure where I am going wrong: Here is the HTML code with the script tags to load the sp.js, sp.runtime.js, and sp.core.js files:

    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
        <meta charset="utf-8">
        <title>Some Title</title>
        
        <script type="text/javascript" src="_layouts/15/sp.core.js"></script>
        <script type="text/javascript" src="_layouts/15/sp.runtime.js"></script>
        <script type="text/javascript" src="_layouts/15/sp.js"></script>
    </head>
    <body>
    <script src="index.js" charset="utf-8"></script>
    </body>
    </html>

Here is code from my Javascript file:

    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {});
    document.addEventListener("DOMContentLoaded", function () {
        ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");
        });
    
    var collListItem;
    
    function retrieveListItems() {
        alert("Start Retrieval");
        var clientContext = new SP.ClientContext();
        var oList = clientContext.get_web().get_lists().getByTitle('SomeList');
        alert(oList);
        var camlQuery = new SP.CamlQuery();
        collListItem = oList.getItems(camlQuery);
        clientContext.load(collListItem);
        clientContext.executeQueryAsync(
        Function.createDelegate(this, this.onQuerySucceeded),Function.createDelegate(this, this.onQueryFailed)
        );
        alert("Retrieved");
        }
        
    function onQuerySucceeded(sender, args) {
        var listItemInfo = "";
        var listItemEnumerator = collListItem.getEnumerator();
        while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();
        listItemInfo += '<strong>ID: </strong> ' + oListItem.get_id() +
        ' <strong>Title:</strong> ' + oListItem.get_item('Item ID') +
        ' <strong>FirstName:</strong> ' + oListItem.get_item('Procedure Name') +
        ' <strong>LastName:</strong> ' + oListItem.get_item('Document Number') +
        '<br />';
        alert("success");
    }
    
    alert("post");
    
    document.querySelector("#test").html(listItemInfo);
    }
    
    
    function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() +
    '\n' + args.get_stackTrace());
    }

This keeps failing due to the a uncaught reference error shown below and i'm not sure where I am going wrong.

Uncaught ReferenceError: Type is not defined
    at sp.core.js:2:213
(anonymous) @ sp.core.js:2
sp.runtime.js:2 
        
       Uncaught ReferenceError: Type is not defined
    at sp.runtime.js:2:322
(anonymous) @ sp.runtime.js:2
sp.js:2 
        
       Uncaught ReferenceError: Type is not defined
    at sp.js:2:203
(anonymous) @ sp.js:2
index.js:36 
        
       Uncaught ReferenceError: SP is not defined
    at index.js:36:1


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source