Uncaught TypeError: Cannot read property 'toLowerCase' of undefined on jQuery function

Question

I have this jQuery script in a page

$(document).ready(function() {
  $.ajax({
    type: "POST",
    url: "/notification/unread",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(data){
      $("#notification_badge").html(data).removeClass("hidden");
    }
  });

However I'm getting an error on the subject when calling the $.ajax function:

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined on jQuery function

This is what i find in the console

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
    at Object.setRequestHeader (jquery.min.js:4)
    at HTMLDocument.<anonymous> (badge.js:5)
    at HTMLDocument.dispatch (jquery.min.js:3)
    at HTMLDocument.r.handle (jquery.min.js:3)
    at Object.trigger (jquery.min.js:3)
    at Function.ajax (jquery.min.js:4)
    at badge.js:10
    at dispatch (jquery.min.js:3)
    at r.handle (jquery.min.js:3)

The POST call is not made. Where is the error?

Answer 1

Try changing the function definition to ES6 standard. From this

$(document).ready(function() {});

to this

$(document).ready(() =>{});