jquery.dataTables.js：无法使用 Svelte 读取未定义的属性

Question

我只在浏览器（不是 ssr）中使用带有 datatables.js 和 jquery.js 的 svelte 3。

数据表发出 ajax 请求并尝试创建表后，出现错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'createElement')
    at _fnCreateTr (jquery.dataTables.js:3160)

在 firefox 中的错误是：未捕获的类型错误：文档未定义。

使用 chrome 调试器，我看到该文档 == 未定义。

浏览器中没有定义文档怎么可能？

我的代码是：

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


    dt(jQuery)


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

    fixJquery(jQuery);
    onMount(async () => {
        await tick();

        jQuery(document).ready( function () {

            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>

Answer 1

根据您加载 DataTables 库的方式，它可能会看到不同的 scope 和不同的初始化 jQuery。 我以前遇到过这个问题。 因此，最好显式初始化 DataTables 并将 jQuery 及其文档传递给它。

这是我们使用 Svelte + DataTables 的一些开源代码（+ 其 jQuery 依赖项）

您可以使用 Svelte + DataTables 在此处查看实时网站。