Estoy intentando ejecutar un ejemplo de juguete de egjs-grid para Svelte y aparece el error de título cuando intento ejecutarlo. Mi código es muy 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>Eso es un problema de SSR. El componente se procesa primero en el servidor y no puede encontrar la propiedad de destrucción de algo que solo existe en el navegador.
Esto se puede resolver agregando un protector de navegador, así:
<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}Sin embargo, esta solución es fea y no idiomática. El autor de la biblioteca probablemente debería esforzarse por hacer que funcione con SSR (¡tal vez pueda considerar contribuir a dicha biblioteca!).