uncaught SyntaxError：意外的令牌導出它發生在popper.js：2371

Question

我是bootstrap和jquery的新手。 我正在嘗試使用數據表功能，如排序，而我運行我的代碼我在控制台中收到此錯誤：

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。為什么我收到此錯誤：

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

2.為什么數據表的特征像頁碼和排序方法在我的瀏覽器中是不規則的。（正如你在圖片中看到的）這是我的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

捆綁時popper.js上出現意外的令牌導出表明Popper庫需要相應JS文件的UMD構建版本，這里錯誤地設置了（可能你正在使用ESNext版本）：

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

UMD版本導入是必要的，因為我們想要使用由官方頁面中所寫的捆綁機制（ System.Web.Optimization ）生成的<script>標簽來導入它。

如果要使用<script>標記導入它，請使用UMD。

以下是使用UMD版本和MVC捆綁的步驟：

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

注意：如果您正在尋找與UMD版本相比的ESNext版本的Popper.js ，您將在后者中看到此標題在前者中不存在：

(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文件沒有正確包含。 請參閱“ 捆綁和縮小”部分以導入CSS捆綁包。

相關問題：

如何在Bootstrap 4 beta中使用Popper.js

bootstrap 4中的popper.js給出了SyntaxError Unexpected token export

uncaught SyntaxError：意外的令牌導出它發生在popper.js：2371

問題描述

1 個解決方案

解決方案1
3 已采納 2018-10-01 02:08:17

uncaught SyntaxError：意外的令牌導出它發生在popper.js：2371

問題描述

1 個解決方案

解決方案1 3 已采納 2018-10-01 02:08:17

解決方案1
3 已采納 2018-10-01 02:08:17