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

[erichui]

[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.