requirejs require jquery is undefined

Question

I have read many SO questions about this and I even moved out the config from data-main attribute as suggested by one of the answers, still no luck.

I have rj_config.js

"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 project.js

"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);
        }
    });
});

HTML

<script src="{% static 'js/rj_config.js' %}"></script>
<script data-main="project" src="{% static 'vendor/requirejs/require.js' %}"></script>

I am still receiving error Uncaught TypeError: Cannot read property 'ajaxSetup' of undefined in project.js

Answer 1

Came across an answer which indirectly hinted something that I should use requirejs instead of require , since I already defined require in rj_config.js

So after changing to requirejs and worked UPDATE: works sometimes:

"use strict";

requirejs(['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);
        }
    });
});