Occasional issue with Bootstrap where jQuery is required for JavaScript

Recently I have started implementing requirejs in my project, but I have encountered a persistent issue that I am unable to resolve. The error message "Bootstrap's JavaScript requires jQuery" randomly appears when I load my application. Below are the relevant files:

.HTML

<html>
<head>
<link href="./css/bootstrap.min.css" rel="stylesheet">
<link href="./css/custom.css" rel="stylesheet">
<script data-main="scripts/main" src="scripts/vendor/require.js"></script>
</head>
<body>
...
</body>

my require.config from main.js file:

requirejs.config({
    baseUrl : './scripts',
    shim : {
        underscore : {
            exports : '_'
        },

        bootstrap : {
            dep : [ 'jquery'],
            exports: 'Bootstrap'
        },

        backbone : {
            deps : [ 'jquery', 'underscore' ],
            exports : 'Backbone'
        },

        marionette : {
            deps : [ 'jquery', 'underscore', 'backbone' ],
            exports : 'Marionette'
        },

        text: {
            deps : [ 'jquery', 'underscore', 'backbone' ],
            exports: 'Text'
        }
    },

    paths : {
        jquery : 'vendor/jquery.min',
        underscore : 'vendor/underscore',
        bootstrap : 'vendor/bootstrap.min',
        backbone : 'vendor/backbone',
        marionette : 'vendor/backbone.marionette',
        text: 'vendor/text'
    }
});

Although this issue occurs randomly, I am seeking assistance in identifying what I may have configured incorrectly or how I can troubleshoot the problem. Any insight would be greatly appreciated.

Thank you

Answer №1

Within this section of your configuration:

bootstrap : {
            dep : [ 'jquery'],

It is important to use deps instead of dep. Using dep implies that no dependencies are specified, causing Bootstrap to load properly only if jQuery happens to be loaded beforehand. (Additionally, since Bootstrap does not define a Bootstrap symbol, the exports section is unnecessary.)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Node.js's module-only scope concept allows variables and functions defined within

Currently, I am attempting to create a function that can set a variable at the top-level scope of a module without it leaking into the global scope. Initially, I believed that implicit variable declarations within a module would remain confined to the modu ...

Implementing a collapsible menu feature in Bootstrap 3 when clicked

Experiencing an issue with a Bootstrap menu where I want the menu to collapse after clicking on one of the sections. This is the HTML code: <div class="container" id="home"> <nav class="navbar navbar-default navbar-fixed-top" role="navig ...

Is it possible to modify a variable within the readline function?

Can anyone help me figure out how to update the variable x within this function? const readline = require('readline'); const r1 = readline.createInterface({ input: process.stdin, terminal: false }); let x = 1; r1.on('line', fu ...

An error occured upon loading FullCalendar: Uncaught TypeError - Unable to read property 'push' as it is undefined

First of all, thank you for your assistance. I've been trying to load FullCalendar (https://fullcalendar.io/) on my development environments but it doesn't seem to be working. When I check the console in Chrome, it shows me the following error m ...

Encountering a Typescript error while attempting to extract state from a History object containing an enum property

My enum structure is as follows: enum values { first, second, } Within my component, I handle the history object like this: const { push, location: { state = {} } } = useHistory(); Additionally, in the same component within a useEffect hook, I have ...

Looking to showcase the outcome of the Procedure invocation when I made the call?

{ "isSuccessful": true, "resultSet": [ { "name": "pradeep", "password": 123, "timestamp": "2014-04-08T12:58:45.000Z" }, { "name": "dileep", "password": 1234, "timestamp": "2014-04-08T13:00:52.000Z" } ] } I have ...

Is there a way to convert datetime format to date in a Vue component?

With my Vue component set up like this: <template> ... <td>{{getDate(item.created_at)}}</td> ... </template> <script> export default { ... methods: { getDate(datetime) { ...

What is the best way to design a dynamic menu using HTML, CSS, and jQuery, where each li element gradually disappears?

Consider this menu structure: <ul class="main-menu"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> My task is to dynamically hide th ...

jQuery Issue - Clash between multiple menus sharing the same class

Hey there! I'm currently diving into the world of jQuery and encountering an issue with my menu. Whenever I click on a menu item with either the "tm-nav-vertical" or "tm-nav-horizontal" class, it removes the .active class from the initial menu item. I ...

Creating an app for sending text messages and making video calls with Spring Boot technology

I am interested in developing an application with Spring Boot that allows users to make video calls and share text messages. I also want the ability to save these videos for future viewing by registered users of the app. Although I am familiar with node.j ...

Is there a way to align the image next to the form and ensure they are both the same size?

I've been struggling to resize the image to match the form size, but I can't seem to get it right. Can anyone provide me with some guidance on this issue? I have obtained this contact form from a website that I plan to modify slightly, but I need ...

Retrieve Django imagefield file name using jQuery before submitting

Exploring the essential Django image file upload procedure, where the image model incorporates the ImageField class. There's a custom display button replacing the default upload button which usually showcases the image name alongside it. Hence, the ne ...

detect mouse click coordinates within an iframe that spans multiple domains

I am currently encountering an issue with tracking click position over a cross-domain iframe. Here is my current code: <div class="poin"> <iframe width="640" height="360" src="http://cross_domain" frameborder="0" allowfullscreen id="video">< ...

Setting the default <a-sky> in Aframe: A step-by-step guide

There was a fascinating projection I witnessed where two images were displayed in the sky. [https://codepen.io/captDaylight/full/PNaVmR/][code] Upon opening it, you are greeted with two spheres and a default white background. As you move your cursor over ...

How can I update the title of the NavigationBarRouteMapper without altering the current route in React Native?

Here is a snippet of code that outlines the NavigationBarRouteMapper: var NavigationBarRouteMapper = { ... , RightButton(route, navigator, index, navState){ return( <TouchableHighlight onPress={()=>{ //When this ...

Is there a way to pause the execution of code and prompt for confirmation before continuing?

Typically, I utilize the following code snippet in the backend of my application to display a pop-up message to the user after a successful entry has been saved: ScriptManager.RegisterStartupScript(this, this.GetType(), "pop", "<script>alert('C ...

Incorporating database row data into JavaScript objects: a guide

Here's a question that has me stumped and seeking help. Following an ajax send request, I utilized this php code to retrieve all the rows and columns from my database: $sql = "SELECT * FROM categories"; $result=$conn->query($sql); $arr = $resul ...

What is the functionality of this JQuery Popup?

I'm facing an issue with my JQuery Popup. When the "Login" button is clicked, it hides the Login popup but doesn't show the Sign Up popup. How can I make sure that clicking on "Login" hides the Login popup and shows the Sign Up popup accordingly? ...

Repeating a PHP variable within an angular scope

When working with PHP, any element prefixed with a $ is recognized as a variable. However, I encountered an issue when attempting to output an Angular statement using the following code: if(...) { echo "return $scope.id;"; } An error message indicated th ...

How can I create a semantic-ui dropdown with a dynamically generated header?

Here are the dropdown options: const options = [ { key: '1', text: 'Example 1', value: 'Example 1', type:'ABC' }, { key: '2', text: 'Example 2', value: 'Example 2', t ...