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/)

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

Answer 2

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