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

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. — ADyson, Feb 26 '19 at 21:05
@ADyson It does load popper.js before bootstrap.js but it still throw me the error. — Mathias Chartier, Feb 26 '19 at 22:31
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. — ADyson, Feb 26 '19 at 22:34

GidiBloke · Answer 1 · 2020-10-16T09:02:37.987

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

Thanks! I believe you need a comma after each string in your bundle: `...popper.js",` — flashsplat, Oct 16 '20 at 03:18

score 2 · Answer 2 · answered Feb 26 '19 at 22:37

2

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

answered Feb 26 '19 at 22:37

Mathias Chartier

199
2
15

score 0 · Answer 3 · answered Mar 02 '22 at 17:17

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

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

3 Answers3