SvelteKit Builder IO Dynamic Data Bug

Bugs
1

here’s a min reproduction of the issue, using a temp builder io.

Space key and reproduction steps can be found in the repo.

3

Hello @manish-sharma

You must start from the page /foo and then navigate to /dynamic . Note that this does not occur in the builder, or a fresh reload of a page, only during client-side navigation.

Please see the instructions in the README of the git repo

github.com/AlbertMarashi/builder-io-issue

4

PS. This occurs regardless of the isolated-vm setting

5

There is some additional information about the issue inside of the builder discord, see this link below:

6

Hello @albert-siteforge,

Thank you for the clarification. I’ve successfully reproduced the issue on my end and will be discussing it internally to determine the best course of action. I’ll keep you updated as soon as we have more information.

In the meantime, I wanted to share a potential workaround that might help:

In SvelteKit, navigation between routes is typically handled using standard <a> elements instead of framework-specific <Link> components. When a user clicks on a link with an href that points to a route within your app, SvelteKit handles the navigation by importing the required code and calling any necessary load functions to fetch data.

You can customize the behavior of these links using data-sveltekit-* attributes, which can be added either to the <a> element itself or to a parent element. More details can be found in the SvelteKit documentation.

To address the issue you’re facing, you might consider creating a custom Link component that uses the data-sveltekit-reload attribute. Here’s a basic example that we tested and found to be effective:

<!-- src/components/LinkComponent.svelte -->
<script>
    export let text;
    export let url;
  </script>
  
  <a href={url} data-sveltekit-reload>
    {text}
  </a>

// +page.svelte

<script>
    import { PUBLIC_BUILDER_IO_KEY } from "$env/static/public";
    import { Content } from "@builder.io/sdk-svelte";
    import LinkComponent from '../../components/LinkComponent.svelte'; 
    const CUSTOM_COMPONENTS = [
  {
    component: LinkComponent,
    name: 'CustomLink',
    inputs: [
      { name: 'text', type: 'string', defaultValue: 'Click me' },
      { name: 'url', type: 'url', defaultValue: '#' },
    ],
  },
];

let {
    data
} = $props()
</script>

<Content
    content={data.content}
    apiKey={PUBLIC_BUILDER_IO_KEY}
    model="page"
    customComponents={CUSTOM_COMPONENTS}
/>

I hope this provides a useful workaround for your issue. Please let me know if you have any questions or need further assistance.

7

My workaround was just to embed the data.content.data.state inside of the data field in the Content component

<Content
apiKey={PUBLIC_BUILDERIO_KEY}
content={data.content}
customComponents={components}
data={{
…(data.content?.data?.state || {}),

8

Thanks for sharing the workaround. It makes sense to pass the data props.

9

here’s a min reproduction of the issue, using a temp builder io. Space key and reproduction steps love language test can be found in the repo. Svelte Kit Builder IO Dynamic Data Bug · Bugs. 6, 16, August 20, 2024. Preview function vue-js not working · Technical Questions · visual-editor.