Not able to install bootstrap 4 (beta) nuget package to .Net MVC (.Net version 4.6.2)

I was finally able to get Bootstrap 4-Beta working by doing the following:

1.) Install the popper.js NuGet Package V1.12.3

2.) Install Bootstrap4-beta NuGet Package

3.) Update your BundleConfig.cs to include the following: Note the popper.js path

bundles.Add(new ScriptBundle("~/Scrpts/Bootstrap").Include(
                             /*** Make sure popper.js is pointing to umd ***/
                             "~/Scripts/umd/popper.js", 
                             "~/Scripts/bootstrap.js",
                             ));

bundles.Add(new StyleBundle("~/CSS/Bootstrap").Include(
                            "~/Content/bootstrap.css"));

For some reason if you try to use the popper.js in the root of the \Scripts folder you will receive the error:

SyntaxError: export declarations may only appear at top level of a module

but the version in the /Scripts/umd seems to work.

You can get around this by manually adding the popper.js package to your packages config.

<package id="popper.js" version="1.11.1" targetFramework="net462" />

Then you can go into the nuget package manager and install normally.

I managed to get around this problem by downloading the latest (1.12.3 at the time of writing) popper.js nuget package before updating to bootstrap 4.0.

Then in the bundles.config I added the popper js like this

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

The umd version is the only one that worked for me the others gave an console error of

Unrecognised Token Export

Just make sure to include the popper js file before the bootstrap one.

@Scripts.Render("~/bundles/popper")
@Scripts.Render("~/bundles/bootstrap")

I also noticed that this then broke the majority of the auto produced template as it's based on previous versions of bootstrap. The navbar almost completely vanishes. I managed to fix mine by replacing it with the following, but this doesn't include any items in the mobile menu.

<div class="navbar navbar-expand-lg navbar-dark bg-dark">   
        <a class="navbar-brand" href="#">My Blog</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav">
                <li class="nav-item">@Html.ActionLink("Home", "Index", "Home", new { @class = "nav-link" })</li>
                <li class="nav-item">@Html.ActionLink("About", "About", "Home", new { @class = "nav-link" })</li>
                <li class="nav-item">@Html.ActionLink("Contact", "Contact", "Home", new { @class = "nav-link" })</li>
            </ul>                
        </div>        
    </div>

I know this question has a few good answers but this was the full solution that worked for me so I thought I'd share it in the hope that it spares someone a bit of time in the future.