Not working with SvelteKit

[th-km]

I did a test with Sveltkit and I'm getting this error:

<BlockContent> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules

All packages are installed as devDependencies, and the PortableText component is installed with the block-content-to-hyperscript package.

[th-km]

I made a demo here

[th-km]

It might be more related to Svetkit and how it deals with imports. I'm leaving the link here if someone is interested to try it out and see how to make Svelkit and PortableText work together.

[kenjonespizza]

Same issue here. I just can't get this working.

[th-km]

The workaround is to use the dep optimization options in svelte.config.cjs

vite: {
    optimizeDeps: {
     include: ['@sanity/block-content-to-hyperscript/internals']
}

[taocode]

Your optimizeDeps trick sorted out the issue for me, thanks!

For simplicity and reference for others, my svelte.config.js is altered as follows:

kit: {
  adapter: adapter(),
  vite: {
    optimizeDeps: {
      include: ['@sanity/block-content-to-hyperscript/internals']
    }
  },
  // hydrate the <div id="svelte"> element in src/app.html
  target: '#svelte'
}

[taocode]

Although this seemed to work, the error went away and content was properly rendered with <li>,<p>, etc.., the links lost their href attribute and included an extra space character at the end like <a>this was a link with href </a>.

Switching to PortableText from @portabletext/svelte required adding a Link serializer with a svelte component as follows:

<script>
  import Link from '$lib/Link.svelte'
</script>
<PortableText
  blocks={post.body}
  serializers={{
    marks: {
      link: Link
    }
  }}
/>

with $lib/Link.svelte like:

<script>
  export let portableText
</script>
<a href={portableText.mark.href}>
  <slot />
</a>

Which then yielded my desired results, correct tags and links with href attributes.

Special thanks to @hdoro for sharing this solution in his upcoming SvelteKit Blog Sanity template.

[hdoro]

@taocode I'm yet to add default rendering of links, upon which you won't have to manually specify this unless your link's data structure is different 😉

Do reach out in Slack if you (or others) have any questions, it'll be a pleasure to help o/