uncaught SyntaxError: Unexpected token export its happen at popper.js:2371

Question

I am new to bootstrap and jquery. I'm trying to use datatables feature like sorting , while I run my codes I get this error in console:

uncaught SyntaxError: Unexpected token export at popper.js:2371

my popper.js version is: 1.14.3 and I render it in my layout like this :

<body>
    @Html.Partial("_navbar")
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year -www.vidly.com @*My ASP.NET Application*@</p>
        </footer>
    </div>
 @*   @Scripts.Render("~/bundles/lib")*@
  @Scripts.Render("~/Scripts/jquery-3.3.1.js")
  @Scripts.Render("~/Scripts/DataTables/jquery.dataTables.min.js")
  @Scripts.Render("~/Scripts/DataTables/dataTables.bootstrap4.min.js")

  @Scripts.Render("~/Scripts/popper.js")
  @Scripts.Render("~/Scripts/bootstrap.js")
  @Scripts.Render("~/Scripts/bootbox.js")
  @Scripts.Render("~/Scripts/respond.js")
  @Scripts.Render("~/Scripts/DataTables/jquery.dataTables.js")
  @Scripts.Render("~/Scripts/DataTables/DataTables.bootstrap.js")
    @*@Styles.Render("~/Content/css")*@

    @RenderSection("scripts", required: false)
</body>

and the picture of my browser, Here I have 2 question :1.why I get this error :

uncaught SyntaxError: Unexpected token export at popper.js:2371

2.Why datatables feature like pages number and sorting methods are irregular in my browser.(as you have seen in picture ) this is my css bundles :

 bundles.Add(new StyleBundle("~/Content/css").Include(

                      "~/Content/bootstrap-lumen.css",
                      "~/Content/DataTables/css/dataTables.bootstrap.css",
                      "~/Content/site.css"));

I render it in my _layout:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @*@Scripts.Render("~/bundles/lib")*@
    @Styles.Render("~/Content/css") 
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    @Html.Partial("_navbar")
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year -www.vidly.com @*My ASP.NET Application*@</p>
        </footer>
    </div>
    @Scripts.Render("~/bundles/lib")

    @RenderSection("scripts", required: false)
</body>
</html>

TIA

your bootstrap is not loaded properly, please check your nav-menu, it must show properly if it has loaded the bootstrap correctly. — Anirudha Gupta, Sep 30 '18 at 02:21

score 3 · Accepted Answer · answered Oct 01 '18 at 02:08

Unexpected token export at popper.js on bundling indicates that Popper library requires UMD build version of corresponding JS file, which wrongly set here (probably you're using ESNext version):

@Scripts.Render("~/Scripts/popper.js")

The UMD version import is necessary since we want to import it with <script> tag generated by bundling mechanism (System.Web.Optimization) as written in official page.

If you want to import it with a <script> tag, use UMD.

Here are those steps to use UMD version with MVC bundling:

1) Get UMD version from dist package here: https://unpkg.com/popper.js@1.14.4/dist/umd/

2) Save the UMD package inside /Scripts/umd folder.

3) Create JS bundles in RegisterBundles() method with specified paths like example below:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
    "~/Scripts/jquery-*",
    // other jQuery scripts here
));

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
    "~/Scripts/umd/popper.js", // set to UMD version
    "~/Scripts/bootstrap.js",
    "~/Scripts/bootbox.js",
    "~/Scripts/respond.js",

    // other Bootstrap scripts here
));

4) Use @Scripts.Render() helper in layout page to include them (note that the script order matters):

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

Note: If you're looking for ESNext version of Popper.js compared with UMD version, you will see this header in latter which not exist in former:

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
    typeof define === 'function' && define.amd ? define(factory) :
    (global.Popper = factory());
}(this, (function () {
    // skipped for brevity
})));

The function( global, factory ) enables Popper to get injected into global scope using <script> tag reference, which becomes possible reason of UMD bundle usage.

About your second issue, sounds like the CSS files are not included properly. Refer to Bundling and Minification section to import CSS bundles.

Related issues:

How to use Popper.js with Bootstrap 4 beta

popper.js in bootstrap 4 gives SyntaxError Unexpected token export

thanks dear tetsuya you solved my first porblem but for my 2nd problem I added my css bundles to question can you guide me more? — Ali Eshghi, Oct 02 '18 at 03:05

uncaught SyntaxError: Unexpected token export its happen at popper.js:2371

1 Answers1