Popper not loading before bootstrap in visual studio 2017 ASP.NET MVC

Question

I'm trying to implement popouts but it seems like poppers.js doesn't want to load before bootstrap.js. I've tried to place the bundle before the bootstrap one but it doesn't want to load. BundleConfig:

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                "~/Scripts/jquery-{version}.js"));

    bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                "~/Scripts/jquery.validate*"));

    // Use the development version of Modernizr to develop with and learn from. Then, when you're
    // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
    bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                "~/Scripts/modernizr-*"));

    bundles.Add(new ScriptBundle("~/bundles/popper").Include(
              "~/Scripts/popper.js"
              ));

    bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
              "~/Scripts/bootstrap.js"
              ));

    bundles.Add(new StyleBundle("~/Content/css").Include(
              "~/Content/bootstrap.css",
              "~/Content/xbbcode.css",
              "~/Content/site.css"));


}

_Layout:

@Scripts.Render("~/bundles/popper")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)

I still get this error:

jQuery.Deferred exception: Bootstrap's tooltips require Popper.js (https://popper.js.org/) Tooltip@http://localhost:56609/Scripts/bootstrap.js:2836:15 Popover@http://localhost:56609/Scripts/bootstrap.js:3509:14 _jQueryInterface/<@http://localhost:56609/Scripts/bootstrap.js:3569:18 each@http://localhost:56609/Scripts/jquery-3.3.1.js:354:10 each@http://localhost:56609/Scripts/jquery-3.3.1.js:189:10 _jQueryInterface@http://localhost:56609/Scripts/bootstrap.js:3559:14 load/http://localhost:56609/:299:46 mightThrow@http://localhost:56609/Scripts/jquery-3.3.1.js:3534:21 resolve/http://localhost:56609/Scripts/jquery-3.3.1.js:3602:12 undefined jquery-3.3.1.js:3818:3 TypeError: Bootstrap's tooltips require Popper.js (https://popper.js.org/)

Ursel

have you checked your brower's network tab during the page loading process? Does it attempt to load the popper script? Does it perhaps fail? Maybe your path is wrong or something. In theory what you've done above should work. – Morality

@Morality It does load popper.js before bootstrap.js but it still throw me the error. – Ursel

If you're certain the file is definitely being loaded successfully (i.e. you get a 200 ok response for that specific JS file I mean) and the files are loaded in the correct order then it doesn't really make sense that you get the error. I can only guess that maybe you have an incompatible version of popper.js or something. – Morality

Answer 1

This was doing my head in for about 30 mins but i managed to solve it. All i did was add the UMD version of popper.js and bundled it with the bootstrap.js.

What is UMD

The UMD pattern typically attempts to offer compatibility with the most popular script loaders of the day (e.g RequireJS amongst others). In many cases it uses AMD as a base, with special-casing added to handle CommonJS compatibility.

So your BundleConfig.cs will look like this...

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
            "~/Scripts/umd/popper.js",
            "~/Scripts/bootstrap.js"));

I also tried bundling it on its own and it worked.

        bundles.Add(new ScriptBundle("~/bundles/popper").Include(
                    "~/Scripts/umd/popper.js"));

Just remember to add it to your _Layout.cshtml. Also, i think order matters so try this order instead.

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/popper")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)

So jQuery first, popper and then bootstrap. Hope this helps

Hildie

Thanks! I believe you need a comma after each string in your bundle: ...popper.js", – Vortical

Answer 2

I solved by adding the bootstrap.bundle.js which includes popper.js within.

Ursel

Answer 3

If you are using a ScriptManager component and don't want to use bundles, you can reference the script js files directly with the Path attribute:

<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Path="~/Scripts/umd/popper.min.js" />
<asp:ScriptReference Name="bootstrap" />
<asp:ScriptReference Path="~/Scripts/jquery-ui-1.12.1.js" />

Shaunshauna