CODEWITHSUNDEEP
javascripthtmlcsssveltesveltekit
chinahalffull
chinahalffull

Reputation: 61

TypeError: Cannot read properties of undefined (reading 'destroy') when using Svelte and egjs-grid

I'm attempting to run a toy example of egjs-grid for Svelte, and I get the titular error when I attempt to run it. My code is very simple:

<script>
    import { JustifiedGrid } from "@egjs/svelte-grid";
  
    const gap = 5;
    const defaultDirection = "end";
    const rowRange = 0;
    const columnRange = [1,8];
    const sizeRange = [200,1000];
    const isCroppedSize = false;
    const displayedRow = -1;
  </script>
  
  <JustifiedGrid
    class="container"
    {defaultDirection}
    {gap}
    {rowRange}
    {columnRange}
    {sizeRange}
    {isCroppedSize}
    {displayedRow}
  >
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </JustifiedGrid>

Upvotes: 1

Views: 1254

Answers (1)

Odilf
Odilf

Reputation: 1856

That's an SSR issue. The component gets rendered in the server first and it can't find the destroy property of something which only exists in the browser.

This can be solved by adding a browser guard, like so:

<script>
    import { browser } from "$app/env";
    import { JustifiedGrid } from "@egjs/svelte-grid";
  
    const gap = 5;
    const defaultDirection = "end";
    const rowRange = 0;
    const columnRange = [1,8];
    const sizeRange = [200,1000];
    const isCroppedSize = false;
    const displayedRow = -1;
</script>

{#if browser}
    <JustifiedGrid
        class="container"
        {defaultDirection}
        {gap}
        {rowRange}
        {columnRange}
        {sizeRange}
        {isCroppedSize}
        {displayedRow}
    >
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
    </JustifiedGrid>
{/if}

However, this solution is ugly and not idiomatic. The library author should probably strive to make it work with SSR (maybe you can consider contributing to said library!).

Upvotes: 0

Related Questions