Uso svelte 3 con datatables.js y jquery.js solo en el navegador (no ssr).
Después de que las tablas de datos hicieran una solicitud ajax e intentaran crear una tabla, recibí un error:
Uncaught TypeError: Cannot read properties of undefined (reading 'createElement') at _fnCreateTr (jquery.dataTables.js:3160)En Firefox, el error fue: TypeError no capturado: el documento no está definido.
Con el depurador de Chrome veo ese documento == indefinido.
¿Cómo es posible que el documento no esté definido en el navegador?
mi código es:
<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>Aquí está Svelte REPL con este problema: svelte.dev/repl/8354f4daadc04165a59dbac5be41e253?version=3.44.2
Dependiendo de cómo cargue la biblioteca DataTables, puede ver un alcance diferente del mundo y jQuery inicializado de manera diferente. Me encontré con este problema antes. Por lo tanto, es mejor inicializar explícitamente DataTables y pasarle jQuery y su documento.
Puede ver el sitio web en vivo aquí usando Svelte + DataTables .