oekazuma/svelte-meta-tags

Duplicative JSON-LD Output

vhscom opened this issue · 4 comments

vhscom commented

Describe the bug
Writing JSON-LD to the page results in duplicative output.

Reproduction

  1. git clone https://github.com/vhscom/repro-duplicative-jsonld-meta.git to copy minimal test case
  2. pnpm i && pnpm dev -- --open to open the error page
  3. Observe the following in dev and production builds: 
    <!-- HTML_TAG_START -->
<script type="application/ld+json">{ ... }</script>
<!-- HTML_TAG_END -->
<script type="application/ld+json">{ ... }</script>

Additional context
Issue reproduced by initializing a fresh SvelteKit project and copy/pasting README example for JSON-LD. See the pnpm-lock.yaml for the exact resource versions used to reproduce, copied below for convenience:

  • '@sveltejs/kit': 1.0.0-next.295_svelte@3.46.4
  • svelte-meta-tags: 2.3.4_svelte@3.46.4+typescript@4.6.2

Aside
JSON-LD gets moved to page head whereas I'd expect it to output where the JsonLd tag is placed.

oekazuma commented

Hmmm... This seems to be a bug in Svelte hydration.
It seems that an issue has already been created, but it has not been resolved😅
sveltejs/svelte#6463

I added the following code to index.svelte and it solved the problem, but hydrate will not work...

<script context="module">
  export const hydrate = false;
</script>
  • ❤️1
vhscom commented

Ah, I'd've found it but I only searched kit and not svelte. I saw in the Kit changelog there were some changes recently related to hydration so it seems this is a non-issue. Please close at your leisure. Thank you!

  • 👍1
nikolayh commented

is there any solution?

oekazuma commented

This is a bug that occurs when rendering against <head>, so it can be worked around by rendering against <body>.
This feature was added in svelte-meta-tags v2.4.0.

docs: https://github.com/oekazuma/svelte-meta-tags#json-ld-properties