Uncaught TypeError: y.fragment.l is not a function

[erichui]

No description provided.

[erichui]

There is no l method in the object that the create_fragment method puts back

[Conduitry]

Please give a small component that reproduces this.

[Conduitry]

The l method is used in claiming nodes during hydration. Are you attempting to use hydration without compiling with hydratable: true?

[Conduitry]

Please reopen if you have a repro and the issue isn't that you are hydrating without compiling with it enabled.

[erichui]

The l method is used in claiming nodes during hydration. Are you attempting to use hydration without compiling with hydratable: true?

First of all, thanks. I forgot to turn it on when compiling

[matthewmueller]

This took me awhile to figure this out. To perhaps save other folks some time, for SSR there are 3 considerations:

1. Rendering HTML

svelte.compile(code, {
  filename: "...",
  generate: 'ssr'
})

You do not need hydratable here.

2. Compile the client

svelte.compile(code, {
  filename: "...",
  generate: 'dom',
  hydratable: true
})

You do need hydratable here.

3. Render the client

App.render({
  target: document.body,
  hydrate: true
}) 

You do need hydrate here.

---

It makes perfect sense now, but the error is a bit terse and it seemed like a Svelte bug.

[Losses]

@Conduitry Maybe the detailed tutorial of ssr with Svelte should be an independent chapter on the official document?

[PierBover]

It makes perfect sense now, but the error is a bit terse and it seemed like a Svelte bug.

hydratable sounds like the component should output hydratable HTML, or that it can be hydrated, so it's weird that it's an option for the client side component.

Anyway thanks for the tip @matthewmueller !

[arackaf]

To add onto what matthewmueller said, hydratable is something you need to add to your webpack config, so Svelte compiles something that can be consumed SSR.

I think this is an area where some better error messages might help.

[vish01]

I'm passing in hydratable:true when compiling svelte component, still getting error mentioned in this issue. I was trying to debug on the client side and this is what I've found:

l() is not available inside c.fragment.

[PierBover]

@vish01 are you using hydratable when compiling the client or the server component?

This option is only for compiling the client-side component that will hydrate the server-rendered HTML.

If you're hydrating, you also need to set hydrate: true when instantiating the component client-side.

[vish01]

@PierBover I'm using hydratable when compiling a server component. And I'm using hydrate: true when I instantiate component too:
A quick example:

<script type="module">
    export const load = async ({ fetch, page }) => {
        var CompFinal = await import('./testAsset.svelte').default;
        return {
                props: { CompFinal: CompFinal },
            };
}
</script>

<script>
import { onMount } from 'svelte';
    export let CompFinal;
    onMount(() => {
        const executed = new CompFinal({
            target: document.body,
            hydrate: true
        });
        console.log('Executed?', executed);
    });
</script>

Let me know if I'm doing something wrong. I'm not an expert at this haha.

[PierBover]

@vish01 like I said, the hydratable setting is when compiling the client-side component.

See this comment just above: #2901 (comment)

[vish01]

@PierBover Sorry I forgot to mention that I'm importing the component on the client side in a different way. I'm fetching a svelte component from another server like this:

export const load = async ({ fetch, page }) => {
        var renderedContent = {};
        const response = await fetch(`url-to-endpoint`)
        if (response.ok) {
            renderedContent = await response.json();
            //store svelte code to a .svelte file
           fs.writeFileSync('src/routes/temp2/testAsset.svelte', renderedContent.asset, 'utf8');
           var CompFinal = await import('./testAsset.svelte').default;
           }
//the rest of the code follows...

Isn't this considered as client side hydrating? Since I'm importing a svelte component at the client side.