Uncaught (in promise) TypeError: Cannot read property 'removeChild' of null

[thorep]

I have this bug in my Svelte project (im new to svelte)

index.mjs:199 Uncaught (in promise) TypeError: Cannot read property 'removeChild' of null
    at detach$1 (index.mjs:199)
    at detach_dev (index.mjs:1603)
    at Object.destroy [as d] (MatchReport.svelte:58)
    at destroy_each (index.mjs:204)
    at Object.destroy [as d] (MatchReport.svelte:50)
    at Object.destroy [as d] (MatchReport.svelte:32)
    at destroy_component (index.mjs:1445)
    at Router.svelte:211
    at index.mjs:813
    at run (index.mjs:18)

The bug comes from Datatables.net, it gets added to the dom but cant be removed.

Anyone know how i can fix this? Do i need to keep track of these things in svelte?
It works when entering the route , the error comes when leaving it.

Code:

<script>
  import { onMount } from "svelte";
  import jQuery from "jquery"
  import dt from "datatables.net"
  dt(jQuery)
      let tableElement
  onMount(_=>{
  let element = document.getElementById('dt')
      jQuery(tableElement).DataTable();
      console.log(element)
    });

  let apiURL = 'http://localhost:3000/api/orgs';
  async function getUsers() {
    let response = await fetch(apiURL);
    let disks = await response.json();
    return disks;
    }

  const promise = getUsers();

  const tt = el =>{
      
      jQuery(el).DataTable();
    }
  function detach(node) {
    node.parentNode.removeChild(node);
}
</script>
      <p>venter</p>

    {#await promise}
      test123
    {:then data}
      <div>
<table use:tt border="1px" class="table table-sm shadow-sm">
  <thead>
    <tr>
<th>Status</th>
<th>Org navn</th>
<th>Org id</th>
<th>GoogleDrive</th>
<th>GoogleDrive ID</th>
<th>AdGroup</th>
<th>AdGroup ID</th>
<th>Actions</th>
    </tr>
  </thead>
  <tbody>
    {#each data as org}
    <tr>
      <td>O</td>
      <td>{org.organizationValue}</td>
      <td>{org.organizationValueDescription}</td>
      <td>{org.mappings.googleDrive.name}</td>
      <td>{org.mappings.googleDrive.id}</td>
      <td>{org.mappings.googleDrive.accessGroup.name}</td>
      <td>{org.mappings.googleDrive.accessGroup.ssid}</td>
      <td></td>
    </tr>
    {/each}
  </tbody>
</table>
      </div>
    {:catch error}
      {/await}

[Phaqui]

I was unable to reproduce the error in the repl. Your action can return an object with a "destroy" method, which will be run when the element is removed from the DOM. Maybe that'll help.

const action = el => {
  console.log("setup");
  return {
    destroy() { console.log("teardown"); }
  }
}

[Conduitry]

GitHub issues aren't the right place for support questions like this. Please ask on StackOverflow or in our Discord chat room.