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

Question

我是 bootstrap 和 jquery 的新手。我正在尝试使用 sorting 等数据表功能，而我运行我的代码在控制台中出现此错误：

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

我的popper.js版本是：1.14.3 我在我的布局中渲染它是这样的：

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

和我浏览器的图片，这里我有 2 个问题：1.why 我得到这个错误：

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

2.Why 数据表功能，如页码和排序方法在我的浏览器中不规则。（如图所示）这是我的 css 捆绑包：

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

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

我在我的 _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

Answer 1

Unexpected token export at popper.js on bundling 表示 Popper 库需要 UMD build version 相应的 JS 文件，这里设置错误（可能是你使用 ESNext 版本):

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

UMD 版本导入是必要的，因为我们要使用 <script> 标记通过捆绑机制 (System.Web.Optimization) 生成，如 official page 中所写。

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

以下是使用带有 MVC 捆绑的 UMD 版本的步骤：

1) 从这里的 dist 包获取 UMD 版本：https://unpkg.com/popper.js@1.14.4/dist/umd/

2) 将 UMD 包保存在 /Scripts/umd 文件夹中。

3) 使用指定路径在 RegisterBundles() 方法中创建 JS 包，如下例所示：

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) 在布局页面中使用 @Scripts.Render() 助手来包含它们（注意脚本顺序很重要）：

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

注意：如果你要找ESNext version of Popper.js compared with UMD version，你会在后面看到这个header，而在前面不存在：

(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
})));

function( global, factory ) 使 Popper 能够使用 <script> 标记引用注入全局范围，这成为 UMD 包使用的可能原因。

关于您的第二个问题，听起来 CSS 文件没有正确包含。参考 Bundling and Minification section 导入 CSS 包。

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

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

javascript

asp.net-mvc

datatables

bootstrap-4

popper.js