I've gone through several Stack Overflow questions regarding this issue, and I even tried moving the config from the data-main attribute as suggested in one of the answers, but unfortunately, it didn't work for me.
Here is my rj_config.js file:
"use strict";
var require = {
baseUrl: '/static/js',
paths: {
'jquery': '../vendor/jquery/dist/jquery.min',
'jquery-ui': '../vendor/jquery-ui',
'bootstrap': '../vendor/bootstrap-sass/assets/javascripts/bootstrap.min'
},
shim : {
'bootstrap' : { 'deps' :['jquery'] }
}
};
And here is my project.js file:
"use strict";
require(['jquery', 'bootstrap'], function($, bootstrap) {
// sets up the csrf on ajax calls
$.ajaxSetup({
beforeSend: function(xhr, settings) {
var csrftoken = $('meta[name="csrf-token"]').attr('content');
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
});
});
Regarding the HTML code:
<script src="{% static 'js/rj_config.js' %}"></script>
<script data-main="project" src="{% static 'vendor/requirejs/require.js' %}"></script>
Despite implementing these changes, I'm still encountering the error message "
Uncaught TypeError: Cannot read property 'ajaxSetup' of undefinedproject.js file.