Bootstrap-table-sticky-header报错：无法读取undefined的utils属性

在为Bootstrap-table实现bootstrap-table-sticky-header功能时，出现如下错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'utils')
报错位置在bootstrap-table-sticky-header.js:1648。

使用版本：

• Bootstrap-table 1.21.2
• Bootstrap 5.2.3

表格除粘性表头外其他功能正常，已尝试调整CSS与脚本加载顺序但无效，代码如下：

@{
    ViewData["Title"] = "Assets By Associate";
}

<div id="divPageContainer">
    <div id="toolbar">
        <select class="form-control">
            <option value="">Export Page</option>
            <option value="all">Export All</option>
        </select>
    </div>
    <div id="divAssetesByAssociate" class="table-responsive">
        <table id="tblAssetesByAssociate"
               class="table-condensed table-striped"
               
               data-toggle="table"
               data-search="true"
               data-sort-name="AssetesByAssociateKey"
               data-sort-order="asc"
               data-show-columns="true"
               data-advanced-search="true"
               data-id-table="advancedTable"
               data-show-multi-sort="true"
               data-show-export="true"
               data-toolbar="#toolbar"
               data-click-to-select="true"
               data-cookie="true"
               data-pagination="true"
               data-show-jump-to="true"
               data-url="/AssetsByAssociates/GetAssetsByAssociateData"
               data-cookie-id-table="tblAssetesByAssociateID"
               data-page-size="10"
               data-page-list="[10, 25, 50, 100, All]"
               data-sticky-header="true">
            <thead>
                <tr style="background-color: #FFFFFF;">
                    <th data-field="Associate_Name" data-visible="true" data-searchable="true" data-sortable="true">Associate Name</th>
                    <th data-field="Laptop_Model" data-visible="true" data-searchable="true" data-sortable="true">Laptop Model</th>
                    <th data-field="Laptop_SN" data-visible="true" data-searchable="true" data-sortable="true">Laptop SN</th>
                    <th data-field="Lan_Mac_address" data-visible="true" data-searchable="true" data-sortable="true">LAN MAC Address</th>
                    <th data-field="WLaN_Mac_address" data-visible="true" data-searchable="true" data-sortable="true">WLaN Mac address</th>
                    <th data-field="Montior_1_Input" data-visible="true" data-searchable="true" data-sortable="true">Montior 1 Input</th>
                    <th data-field="Montior_1_SN" data-visible="true" data-searchable="true" data-sortable="true">Montior 1 SN</th>
                    <th data-field="Montior_2_Input" data-visible="true" data-searchable="true" data-sortable="true">Montior 2 Input</th>
                    <th data-field="Montior_2_SN" data-visible="true" data-searchable="true" data-sortable="true">Montior 2 SN</th>
                    <th data-field="Docking_Station_SN" data-visible="true" data-searchable="true" data-sortable="true">Docking Station SN</th>
                    <th data-field="Printer_PN" data-visible="true" data-searchable="true" data-sortable="true">Printer PN</th>
                    <th data-field="Printer_SN" data-visible="true" data-searchable="true" data-sortable="true">Printer SN</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

@section scripts{
    <link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
    <link href="~/lib/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
    <link href="~/lib/bootstrap-table/extensions/page-jump-to/bootstrap-table-page-jump-to.css" rel="stylesheet" />
    <link href="~/lib/bootstrap-table/extensions/filter-control/bootstrap-table-filter-control.css" rel="stylesheet" />
    <link href="~/lib/bootstrap-table/extensions/sticky-header/bootstrap-table-sticky-header.css" rel="stylesheet">
    <script src="~/lib/bootstrap-table/bootstrap-table.js" type="module"></script>
    <script src="~/lib/bootstrap-table/extensions/toolbar/bootstrap-table-toolbar.js" type="module"></script>
    <script src="~/lib/bootstrap-table/extensions/multiple-sort/bootstrap-table-multiple-sort.js" type="module"></script>
    <script src="~/lib/bootstrap-table/extensions/export/bootstrap-table-export.js" type="module"></script>
    <script src="~/lib/bootstrap-table/extensions/cookie/bootstrap-table-cookie.js" type="module"></script>
    <script src="~/lib/bootstrap-table/extensions/page-jump-to/bootstrap-table-page-jump-to.js" type="module"></script>
    <script src="~/lib/bootstrap-table/tableExport.js"></script>
    <script src="~/lib/bootstrap-table/extensions/sticky-header/bootstrap-table-sticky-header.js"></script>
    <style type="text/css">
        #divAssetesByAssociate {
            margin-bottom: 150px;
        }

        #divPageContainer {
            width: 95%;
            margin: auto;
        }
    </style>
    <script type="text/javascript">

        $(function () {
            ToolbarInit();
        });

        function ToolbarInit() {
            $('#toolbar').find('select').change(function () {
                $('#tblAssetesByAssociate').bootstrapTable('destroy').bootstrapTable({
                    exportDataType: $(this).val(),
                    exportTypes: ['json', 'xml', 'csv', 'txt', 'sql', 'excel']
                })
            }).trigger('change');
        }
    </script>
}

核心原因 #

报错是因为脚本加载方式不匹配：主bootstrap-table.js以type="module"加载（ES模块作用域），而bootstrap-table-sticky-header.js是传统IIFE脚本，无法访问ES模块内暴露的bootstrap-table对象，导致找不到utils属性。此外代码中缺失jQuery和Bootstrap JS的依赖引入，也是潜在问题。

修复步骤 #

1. 统一脚本加载方式
   将bootstrap-table-sticky-header.js的script标签加上type="module"，与其他bootstrap-table扩展保持一致：

   <script src="~/lib/bootstrap-table/extensions/sticky-header/bootstrap-table-sticky-header.js" type="module"></script>
   

2. 补充缺失的依赖脚本
   在所有bootstrap-table脚本之前，引入jQuery和Bootstrap JS（bootstrap-table依赖这两者）：

   <script src="~/lib/jquery/jquery.min.js"></script>
   <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
   

3. 确认版本兼容性
   确保bootstrap-table-sticky-header插件版本与bootstrap-table 1.21.2完全兼容，部分旧版本插件可能不支持ES模块加载。

4. 验证修复效果
   调整后刷新页面，检查控制台是否仍有报错，测试粘性表头功能是否正常工作。

内容的提问来源于stack exchange，提问作者tjestesjr