Shows 'TypeError: Cannot read properties of undefined (reading 'length') initially when attempting to render page.

[schechtere]

Describe the bug

Trivial sveltekit app with svelte-simple-datatables component.

When starting up, 'npm run dev', shows following error:

TypeError: Cannot read properties of undefined (reading 'length')
at Proxy.each (C:\projects\sk_issue\node_modules\svelte\internal\index.js:1723:31)
at Object.default (/src/routes/index.svelte:77:33)
at eval (/node_modules/svelte-simple-datatables/src/Datatable.svelte:79:17)
at Object.$$render (C:\projects\sk_issue\node_modules\svelte\internal\index.js:1758:22)
at eval (/src/routes/index.svelte:61:143)
at Object.$$render (C:\projects\sk_issue\node_modules\svelte\internal\index.js:1758:22)
at Object.default (root.svelte:43:39)
at eval (/.svelte-kit/runtime/components/layout.svelte:8:41)
at Object.$$render (C:\projects\sk_issue\node_modules\svelte\internal\index.js:1758:22)
at root.svelte:37:37

Comment out component and save. Renders an empty browser page, as expected.

Uncomment the component and save. Renders the data grid correctly.

Reproduction

https://github.com/schechtere/sk_issue

Logs

TypeError: Cannot read properties of undefined (reading 'length')
    at Proxy.each (C:\projects\sk_issue\node_modules\svelte\internal\index.js:1723:31)     
    at Object.default (/src/routes/index.svelte:77:33)
    at eval (/node_modules/svelte-simple-datatables/src/Datatable.svelte:79:17)
    at Object.$$render (C:\projects\sk_issue\node_modules\svelte\internal\index.js:1758:22)
    at eval (/src/routes/index.svelte:61:143)
    at Object.$$render (C:\projects\sk_issue\node_modules\svelte\internal\index.js:1758:22)
    at Object.default (root.svelte:43:39)
    at eval (/.svelte-kit/runtime/components/layout.svelte:8:41)
    at Object.$$render (C

System Info

System:
    OS: Windows 10 10.0.19043
    CPU: (12) x64 Intel(R) Core(TM) i7-10710U CPU @ 1.10GHz
    Memory: 4.35 GB / 15.79 GB
  Binaries:
    Node: 16.13.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.3.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (101.0.1210.39)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.42
    @sveltejs/kit: next => 1.0.0-next.330
    svelte: ^3.44.0 => 3.48.0

Severity

blocking all usage of SvelteKit

Additional Information

No response

[Rich-Harris]

The issue here is that the pattern used by svelte-simple-datatables is incompatible with server-side rendering. The binding will take effect, but the store value isn't updated in time for the HTML to be rendered.

It would probably be better if it did something like this:

<Datatable {data} let:rows>
  <thead>
    <th data-key="id">ID</th>
    <th data-key="first_name">First Name</th>
    <th data-key="last_name">Last Name</th>
    <th data-key="email">Email</th>
  </thead>
  <tbody>
    {#each rows as row}
      <tr>
        <td>{row.id}</td>
        <td>{row.first_name}</td>
        <td>{row.last_name}</td>
        <td>{row.email}</td>
      </tr>
    {/each}
  </tbody>
</Datatable>

A workaround would be to initialise rows in the component that uses <Datatable>...

let rows = writable([]);

...but I don't recommend it, honestly, since the SSR output will be missing data, resulting in a flash when the page hydrates. I suggest opening an issue on the svelte-simple-datatables project.

[stephanusyogi]

I don't know if my code is correct, but I'm facing the same problem regarding the appearance of the error length

<script> import { Datatable } from "svelte-simple-datatables"; let dummyUsers = []; let rows; </script>

<section>
  <Datatable data={dummyUsers} bind:dataRows={rows}>
    <thead>
      <th data-key="no_rm">No Rekam Medis</th>
      <th data-key="nik">NIK</th>
      <th data-key="nama_pasien">Nama</th>
      <th data-key="alamat">Alamat</th>
    </thead>
    <tbody>
      {#if rows}
        {#each $rows as row}
          <tr>
            <td>{row.no_rm}</td>
            <td>{row.nik}</td>
            <td>{row.nama_pasien}</td>
            <td>{row.alamat}</td>
          </tr>
        {/each}
      {/if}
    </tbody>
  </Datatable>
</section>

Don't forget to add the styles