Svelte 3 集成 jQuery DataTables.js 触发Cannot read properties of undefined错误问询

问题根因 #

报错是因为你将dt(jQuery)的初始化逻辑放在了组件script标签的顶层。datatables绑定jQuery的过程中会提前缓存document对象的引用，这行代码执行时机早于组件挂载到DOM的阶段，部分版本的datatables在这个阶段执行绑定时会拿到undefined的document引用，后续AJAX请求完成异步渲染表格时，就会抛出访问document属性失败的错误。

解决方案 #

按以下步骤修改代码即可修复：

1. 将dt(jQuery)移到onMount回调内部，放在初始化DataTables之前执行
2. 移除冗余的jQuery(document).ready包裹逻辑，Svelte的onMount钩子触发时，当前组件DOM已完成挂载，document对象处于可用状态，不需要额外加jQuery的ready监听
3. 可选优化：使用Svelte的bind:this获取表格DOM元素，替代ID选择器，避免页面内ID冲突问题

修改后的代码示例 #

<script lang="ts">
    import {onMount, tick} from "svelte";

    import jQuery from 'jquery'
    import dt from 'datatables.net-dt'

    import {flatten, SITE_URL} from "../config";
    import fixJquery from "../includes/jquery.spring-friendly";


    function handleError(xhr, error, thrown) {
        console.error("ERROR", xhr.responseText);
    }

    fixJquery(jQuery);
    onMount(async () => {
        await tick();
        // 在此处完成datatables和jQuery的绑定
        dt(jQuery)
        let dataTable = jQuery("#example").DataTable(
            {
                processing: true,
                serverSide: true,
                ajax: {
                    url: SITE_URL + "/users/datatables",
                    type: "GET",
                    error: handleError
                },
                columns: [
                    {
                        data: 'id'
                    },
                    {
                        data: 'name'
                    }
                ],
            }
        );
    });
</script>

<div>
    <h2>User list</h2>
    <table id="example" class="display" style="width:100%">
        <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

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