Ошибка bootstrap s javascript requires jquery

First of all, thanks for your time looking at my problem!
Seccond, I have seen other questions like mine (for example:
Uncaught Error: Bootstrap’s JavaScript requires jQuery with requirejs), but they didn’t awnser my question.

So, here is the <head> of my <html>

<!DOCTYPE html>

    <!-- metadata -->
    <meta charset="UTF-8">

        <!-- responsive -->
            <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- [/] responsive -->

    <!-- [/] metadata -->




    <!-- links -->

        <!-- bootstrap -->

        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

        <!-- [/] bootstrap -->

    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <!-- [/] links -->




    <!-- script -->
    <!--<script src="js/action.js"></script>-->

        <!-- jquery -->
        <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
        <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <!-- [/] jquery -->

        <!-- bootstrap -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
        <!-- [/] bootstrap -->

    <!-- [/] script -->




    <title>standaard html</title>

</head>




<body>

    <!-- hoofdnavigatie -->
    <nav class="navbar navbar-default navbar-fixed-top      bas_hoofdnav">

        <!-- logo in menubalk -->
        <a class="navbar-brand" href="#">

            <img src="afb/logo/logo.png" class="bas_hoofdnav_logo" alt="Brand" >

        </a>
        <!-- [/] logo in menubalk -->




        <ul class="nav nav-pills navbar-right       bas_hoofdnav_knoppen">

            <li role="presentation" class="active       bas_hoofdnav_knp_actief"><a href="#" onclick="return false;">start</a></li>
            <li role="presentation"><a href="#">over ons</a></li>
            <li role="presentation"><a href="#">diensten</a></li>
            <li role="presentation"><a href="#">winkel</a></li>
            <li role="presentation"><a href="#">contact</a></li>

        </ul>

    </nav>
    <!-- [/] hoofdnavigatie -->

</body>

as you can see I have included jquery and the bootstrap links. but even so… I get this error message:
Uncaught Error: Bootstrap's JavaScript requires jQuery
(anonymous function) @ bootstrap.min.js:6

and here the error

Do I miss something here?

asked Feb 3, 2016 at 13:07

OrangeCode's user avatar

OrangeCodeOrangeCode

1691 gold badge1 silver badge6 bronze badges

2

As I can see in your code you have added jquery Js after the Bootstrap js. You need to include jquery js before adding bootstrap js. Your problem will fix, because bootstrap requires Jquery file.

<!-- First include jquery js -->
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<!-- Then include bootstrap js -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

answered Feb 3, 2016 at 13:13

Deepak Arora's user avatar

1

You need to put jQuery above the Bootstrap JS.

    <!-- jquery -->
    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <!-- [/] jquery -->

    <!-- bootstrap -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <!-- [/] bootstrap -->

answered Feb 3, 2016 at 13:12

I wrestled a bear once.'s user avatar

0

After sure you included jquery library and bootstrap using these commands?:

First, install jQuery using npm as follows:
npm install jquery --save
Second, install Bootstrap using npm as follows:
npm install --save bootstrap@3

My problem was in :

angular.json just change sorting for scripts files included under project . 

     "scripts": [
          "node_modules/jquery/dist/jquery.js"
          "node_modules/bootstrap/dist/js/bootstrap.js",
        ]

to be like this : 

     "scripts": [
          "node_modules/bootstrap/dist/js/bootstrap.js",
           "node_modules/jquery/dist/jquery.js"
        ]

Community's user avatar

answered Sep 25, 2019 at 10:51

Abd Abughazaleh's user avatar

Abd AbughazalehAbd Abughazaleh

4,4373 gold badges41 silver badges51 bronze badges

1

Источник

If you see the JavaScript error that says, “uncaught error: bootstrap’s javascript requires jquery version 1.9.1 or higher, but lower than version 3“, that means you have bootstrap version 3.3 or lower on your website which uses an older version of jQuery. But your website has a newer version of jQuery (higher than version 3).

To fix it, you simply have to install the latest bootstrap 3 JavaScript file, which is version 3.4.1. You can download bootstrap version 3.4.1 from here: https://github.com/twbs/bootstrap/releases/download/v3.4.1/bootstrap-3.4.1-dist.zip

Go to the bootstrap.min.js file in the zip file and replace your old bootstrap.min.js file in your website with this new one and it will work fine with jQuery version 3 or later.

Источник

Uncaught error: bootstrap’s javascript requires jquery – introduction

When you utilize Bootstrap and add jQuery 1.x.x to build up your site, have you ever got the Uncaught error: bootstrap’s javascript requires jquery yet? If yes, do you know how to deal with the trouble? In case you are looking for a useful solution for this issue, let’s take a look at the blog. So, today, we would like to bring you some methods that you can try to get the most suitable one.

How to fix the Uncaught error: bootstrap’s javascript requires jquery?

First of all, let’s make sure that you added jQuery before bootstrap since bootstrap use the features of jQuery. For example, if you are in a Browser-Only environment, then the right order you should try is:

<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/wow.min.js"></script>

Besides, in case you are in Node or CommonJS + Browser environment including Electron, Node-Webkit, etc, the main reason that causes the error is that jQuery’s export logic will check the module before the window:

if (typeof module === "object" && typeof module.exports === "object") {
// CommonJS/Node
} else {
// window
}

As it exports itself through the module.exports, both jQuery and $ won’t be assigned to the window. Therefore, you need to change
<script src="path/to/jquery.js"></script>;
into a require statement, such as:

<script>
window.jQuery = window.$ = require('jquery');
</script>

Last but not least, in case your electron app doesn’t need
nodeIntegration
, simply set it to
false
. So, everything is done and you don’t need to use the solution above.

Final thoughts

In conclusion, we hope that some methods we suggested above will be useful for you. Don’t hesitate to try them to solve the trouble quickly. Any idea for this issue? If yes, why don’t you show it to us by leaving your comment below? What’s more? We are providing a lot of high-quality free WordPress Themes, let’s visit our site and get the best one for your site.

  • Author
  • Recent Posts

Lt Digital Team (Content &Amp; Marketing)

Welcome to LT Digital Team, we’re small team with 5 digital content marketers. We make daily blogs for Joomla! and WordPress CMS, support customers and everyone who has issues with these CMSs and solve any issues with blog instruction posts, trusted by over 1.5 million readers worldwide.

Lt Digital Team (Content &Amp; Marketing)

Источник

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

Comments

@alexey2baranov

Welcome to LT Digital Team, we’re small team with 5 digital content marketers. We make daily blogs for Joomla! and WordPress CMS, support customers and everyone who has issues with these CMSs and solve any issues with blog instruction posts, trusted by over 1.5 million readers worldwide.

Lt Digital Team (Content &Amp; Marketing)

Источник

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

Comments

I’am very new in Bootstrap. So my step by step

  1. install bottstrap as written hire https://v4-alpha.getbootstrap.com/getting-started/download/#npm
  2. install jquery by npm i jquery
  3. write a code
import $ from 'jquery'
require('bootstrap')
  1. run it on webpack-dev-server npm run dev
  2. And finally get error

Uncaught Error: Bootstrap’s JavaScript requires jQuery. jQuery must be included before Bootstrap’s JavaScript.
at eval (eval at (app.js:690), :8:9)
at Object. (app.js:690)
at webpack_require (app.js:556)
at fn (app.js:87)
at eval (eval at (app.js:684), :17:1)
at Object. (app.js:684)
at webpack_require (app.js:556)
at fn (app.js:87)
at Object. (app.js:587)
at webpack_require (app.js:556)

‘

@CyrilWork

@alexey2baranov

hmmmm… old scool scripting in 2017 year? doesn’t bootstrap 4 support commonjs or es6 importing?

i suppose if my some module use jquery it will be included in webpack boundle and another version of jquery will be at the end of body tag just for bootstrap works. so i will get double included jquery library on my page. I think there should be another way for including bootstrap into webpacked projects

IamManchanda, luzanovdm, manniL, mkstix6, snboisen, nathan-osman, mazenbesher, eberkund, SamUndefined, dmonti, and 3 more reacted with thumbs up emoji
BillyWM, dongepulango, and dheerajkhowar reacted with thumbs down emoji

@IamManchanda

@DavidStrada

@alexey2baranov Bootstrap in most of it’s plug-ins relay on having $/jQuery available globally so that’s why you get that message, what you could try is making jQuery available globally and avoid this message, I know it’s a dirty hack but until they start including their dependencies I’m afraid is your only option.

e.g.

import $ from "jquery"
window.jQuery = $
…

@DavidStrada

Also given that you’re using webpack as a work around you could try this.

new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": "jquery"
})

Wepack Docs

@christianirack

Testing with this

import jquery from ‘jquery’
window.jQuery = jquery
require(‘bootstrap’)

@alexey2baranov

@Johann-S

@rolele

@Johann-S The doc is not rendered well. I see all the {% highlight js %} commands.

@wolfy1339

@rolele that’s not the compiled docs. That’s the source.

@anarerdene

Also demo links not working.

@peterbarraud

Hey does anyone else get this error:
Uncaught Error: Bootstrap dropdown require Popper.js
So I do
require('popper');
And get this error:
Cannot find module 'rijs.resdir' from 'C:UsersbarraudDocumentstechbrowserify-prototypingrapo-browserify-part-2-external-cssnode_modulespopperdist'

@Johann-S

Popper.js should be available in the Window scope so you should do :
window.Popper = require('popper')

@peterbarraud

Thanks for the super quick response but it still gives the same error. The includes in my file are as such:

const $ = require('jquery');
window.jQuery = $;
window.Popper = require('popper')
require('bootstrap');

@Johann-S

be sure to use the last release of Popper.js (1.12.5) not the one required by the beta 1 (1.11.0)

@peterbarraud

When I run npm -v popper it shows 4.2.0. What is that supposed to mean?

@Johann-S

Because the package name is popper.js 😉

@peterbarraud

Thanks much @Johann-S . It now works perfect :)

Источник
  • Remove From My Forums

  • Question

  • User-110504647 posted

    Hi all,

    I´ve seen several answers to this error in Netbeans, but I really don´t know how still solve it if you please can help me here,

    i´m just starting my very first course on HTML/CSS that´s why I did not get the solutions maybe,

    Following my course, my code is exactly the same than in the course and all instructions were followed, 

    i have no errors when I check my web page via F12,

    But when I click on:

    bootstrap.min.js

    if(«undefined»==typeof jQuery)throw new Error(«Bootstrap’s JavaScript requires jQuery»)

    jquery.min

    Error(«jQuery requires a window with a document»)

    Please help!

    Thanks a lot

    Rosi

    <script src=»js/jquery.min.js»> type=»text/javascript»></script> <script src=»js/bootstrap.min.js»> type=»text/javascript»></script>

Answers

  • User839733648 posted

    Hi Rosi Q,

    According to your description and code, I’ve tested it and it works well on my side.

    Bootstrap’s JavaScript requires jQuery

    This error occurs always because you’ve not loaded the jquery.min.js before bootstrap.min.js.

    But your code is correct, I’m confused that why you have this error.

    As mgebhard has mentioned, you may check that if the relative root is correct.

    My web page looks ok but when I minimized the page the toolbar is not appearing

    Do you mean that the navbar content miss when minimizing the page?

    This is because you’ve set collapse class to button, you could move it and the button will work well.

    Here is my working code.

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog de Rosi</title>
    <link href="Reference/bootstrap.min.css" rel="stylesheet" />
    <script src="Reference/jquery-3.3.1.min.js"></script>
    <script src="Reference/bootstrap.min.js"></script>
</head>
<body>
    <nav class="navbar navbar-default navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
                    <span class="sr-only">Este botón despliega la barra de navegación</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Mi primer proyecto</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#">Entradas</a></li>
                    <li><a href="#">Favoritos</a></li>
                </ul>
            </div>
        </div>
    </nav>
</body>
</html>

    Best Regards,

    Jenifer

    • Marked as answer by

      Thursday, October 7, 2021 12:00 AM

Источник

Понравилась статья? Поделить с друзьями:
  • Ошибка bootmgr is missing что делать
  • Ошибка blinitializelibrary failed 0xc00000bb при запуске компьютера
  • Ошибка bootmgr is missing при установке
  • Ошибка blind spot syst function red 160
  • Ошибка bootmgr is missing windows 10