jquery.dataTables.js: Cannot read properties of undefined with Svelte

Question

I use svelte 3 with datatables.js and jquery.js in browser only (not ssr).

After datatables make ajax request and try to create table I got error:

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

In firefox error was: Uncaught TypeError: document is undefined .

With chrome debuger I see that document == undefined .

How is posible that document is not defined in browser?

My code is:

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

Here is Svelte REPL with this problem: svelte.dev/repl/8354f4daadc04165a59dbac5be41e253?version=3.44.2

I tried to re-create the issue based on your code but couldn't. Without the additional libraries the document variable is available just as usual. Can you make a Svelte REPL that reproduces the issue & provide the link to it? — BenVida
– BenVida, Commented Dec 7, 2021 at 13:13
Here is Svelte REPL with this problem: svelte.dev/repl/8354f4daadc04165a59dbac5be41e253?version=3.44.2 — user1206570
– user1206570, Commented Dec 7, 2021 at 18:29

Mikko Ohtamaa · Accepted Answer · 2021-12-07 13:06:57Z

3

Depending on how you load DataTables library, it may see a different scope of the world and differently initialised jQuery. I encountered this issue before. Thus, it is better to explicitly initialise DataTables and pass jQuery and its document to it.

Here is some of our open source code that is using Svelte + DataTables (+ its jQuery dependency)

You can see the live website here using Svelte + DataTables.

answered Dec 7, 2021 at 13:06

Mikko Ohtamaa

85k63 gold badges296 silver badges479 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1206570 Over a year ago

I was fixed with this examples. I corrected by this example. Here is the code that works. But I still don't understand how it is possible for a document to be undefined in a browser. Here is fixed version svelte.dev/repl/322a441d233f4cecbdfd8ca0bf5af74c?version=3.44.2

BenVida Over a year ago

@user1206570 It's true that the global document variable cannot be overwritten. However, it can be easily shadowed. Here's an example to demonstrate it: jsfiddle.net/yheon5jk/1 The place where the document was undefined was in a callback function, so somewhere further up the call stack there was a var document=undefined or something to that effect. So it that context document was undefined.

Mikko Ohtamaa Over a year ago

This and the fact that jQuery package needs to work on the server-side where window and document objects are not available.

Collectives™ on Stack Overflow

jquery.dataTables.js: Cannot read properties of undefined with Svelte

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related