Svelte: приложение / ld + json

Со следующим кодом:

<svelte:head>
    <script type='application/ld+json'>
    {
    "@context": "https://schema.org",
    "@type": "Organization",
    "url": "https://filestar.com",
    "logo": "https://filestar.com/logo-512.png"
    }
    </script>
</svelte:head>

При получении:

[svelte-preprocess] Error transforming 'ld+json'.

Message:
Cannot find module './transformers/ld+json'

Stack:
Error: Cannot find module './transformers/ld+json'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Promise.resolve.then (C:\Repos\Filestar-Website\web-vnext\node_modules\svelte-preprocess\dist\utils.js:112:61)

Я пробовал предложения в этой ветке github с тем же результатом: https://github.com/sveltejs/svelte/issues/2438


svelte sapper svelte-3
person Niels Bosma    schedule 10.11.2019    source источник

Ответы (3)


arrow_upward
7
arrow_downward

Похоже, это связано с svelte-preprocess. Попробуйте добавить preserve: ['ld+json'] параметр.

person Rich Harris    schedule 10.11.2019

arrow_upward
6
arrow_downward

Для всех, кто попадает сюда, ответ Рича указывает на правильный ресурс.

Что у меня сработало с Sapper:

// rollup.config.js
// ...
import sveltePreprocess from 'svelte-preprocess';

const preprocess = sveltePreprocess({
  preserve: ['ld+json'],
  // ...
});

export default {
  client: {
    plugins: [
      svelte({
        preprocess,
        // ...
      }),
  },
  server: {
    plugins: [
      svelte({
        preprocess,
        // ...
      }),
    ],
  },
};

<!-- index.svelte -->
<script>
  let jsonld = {
    "@context": "http://schema.org",
    "@type": "...",
    "...": "..."
  };
  jsonld = JSON.stringify(jsonld);
</script>

<svelte:head>
  {@html `<script type="application/ld+json">${jsonld}</script>`}
</svelte:head>

Дополнительное примечание: при использовании prettier и prettier-plugin-svelte компонент svelte получает нежелательные изменения. Следующие действия решают мою проблему.

<!-- index.svelte -->
<script>
  let jsonld = {
    "@context": "http://schema.org",
    "@type": "...",
    "...": "..."
  };
  jsonld = JSON.stringify(jsonld);
  let jsonldScript = `<script type="application/ld+json">${jsonld +
    "<"}/script>`;
</script>

<svelte:head>
  {@html jsonldScript}
</svelte:head>
person MarcCoet    schedule 19.01.2020
comment
Спасибо за это. В итоге я использовал ваше второе решение index.svelte, так как оно работало там, где другой метод не работал. - person Andrew Killen; 26.02.2021

arrow_upward
0
arrow_downward

Согласно этому комментарию, есть еще один способ сделать это.

<script>
  const schema = {
    "@context": "https://schema.org",
    "@type": "Organization",
    "url": "https://filestar.com",
    "logo": "https://filestar.com/logo-512.png"
  }
</script>

<svelte:head>
  {@html 
    `
    <script type="application/ld+json">
      ${JSON.stringify(schema)}
    </script>
    `
  }
</svelte:head>
person Yulian    schedule 01.07.2020