Как правильно установить story-json-to-amp через npm во VUEjs проект?

Question

[Luc1fer]

Всем доброго времени суток! Вот суть проблемы:
Захожу через консоль в папку проекта и пишу
npm i story-json-to-amp
После добавляю в main.js

import story from './story.json';
import storyJsonToAmp from 'story-json-to-amp';
 
const ampHtml = storyJsonToAmp(story);

Затем топаю в нужный мне компонент и вызываю story.json (код из примера на этом сайте)

<amp-story standalone
  title="Stories in AMP - Hello World"
  publisher="AMP Project"
  publisher-logo-src="https://amp.dev/favicons/coast-228x228.png"
  poster-portrait-src="https://amp.dev/static/samples/img/story_dog2_portrait.jpg"
  poster-square-src="https://amp.dev/static/samples/img/story_dog2_square.jpg"
  poster-landscape-src="https://amp.dev/static/samples/img/story_dog2_landscape.jpg">
<amp-story-page id="page-1">
  <amp-story-grid-layer template="fill">
    <amp-img src="https://amp.dev/static/samples/img/story_dog2.jpg"
      width="720"
      height="1280"
      layout="responsive">
    </amp-img>
  </amp-story-grid-layer>
  <amp-story-grid-layer template="vertical">
    <h1>Hello World</h1>
    <p>This is an AMP Story.</p>
  </amp-story-grid-layer>
</amp-story-page>
<amp-story-page id="page-2">
  <amp-story-grid-layer template="fill">
    <amp-video autoplay
      loop
      width="720"
      height="960"
      poster="https://amp.dev/static/samples/img/story_video_dog_cover.jpg"
      layout="responsive">
      <source src="https://amp.dev/samples/video/story_video_dog.mp4"
        type="video/mp4">
    </amp-video>
  </amp-story-grid-layer>
</amp-story-page>
<amp-story-page id="animation-demo">
  <amp-story-grid-layer template="fill">
    <amp-img src="https://amp.dev/static/samples/img/story_dog4.jpg"
      animate-in="fly-in-top"
      width="720"
      height="1280"
      layout="responsive">
    </amp-img>
  </amp-story-grid-layer>
  <amp-story-grid-layer template="thirds">
    <h2 animate-in="fly-in-bottom"
      grid-area="lower-third"
      animate-in-delay="0.4s">
      Best walk ever!
    </h2>
  </amp-story-grid-layer>
</amp-story-page>
<amp-story-page id="layout-demo">
  <amp-story-grid-layer template="thirds">
    <amp-img grid-area="upper-third"
      src="https://amp.dev/static/samples/img/story_thirds_1.jpg"
      width="560"
      height="420"
      layout="responsive">
    </amp-img>
    <amp-img grid-area="middle-third"
      src="https://amp.dev/static/samples/img/story_thirds_2.jpg"
      width="560"
      height="420"
      layout="responsive">
    </amp-img>
    <amp-img grid-area="lower-third"
      src="https://amp.dev/static/samples/img/story_thirds_3.jpg"
      width="560"
      height="420"
      layout="responsive">
    </amp-img>
  </amp-story-grid-layer>
</amp-story-page>

И пишет что такой компонент не зарегистрирован, подскажите где косячу?
При том что когда я делаю это вне проекта wbpack (статикой на html) все работает прекрасно..
Пробовал скрипты подключать через CDN на прямую тоже не получается. Буду благодарен за любую помощь!

Answer 1

[0xD34F]

пишет что такой компонент не зарегистрирован

Что неудивительно - используются кастомные тэги, vue думает, что надо создать экземпляры компонентов, а компонентов нет.

Попробуйте отключить их компиляцию с помощь v-pre или перечислить в ignoredElements.

Comments

[Luc1fer]

перечислить в ignoredElements.

Перечислил -

Vue.config.ignoredElements = [
  'amp-story',
  'amp-story-page',
  'amp-story-grid-layer',
  'amp-img',
  'amp-video',
]

Крашится компиляция при добавлении <amp-story>...</amp-story> , если убрать <amp-story>...</amp-story> то не отображается ни один компонент.. Если убрать const ampHtml = storyJsonToAmp(story);, то все работает в штатном режиме.

[0xD34F]

Алексей Пашков, ну, чем мог - помог. Если сделаете пример в песочнице - попробую разобраться. А вслепую гадать, какие ещё могут быть проблемы я не буду.

[Luc1fer]

Здесь можно скачать архив с проектом (тестовая версия). Что бы было удобнее.

[0xD34F]

Алексей Пашков, вот как? То есть, это вы за меня решили, что мне удобнее. Что же - вы сильно неправы.

Скажите, а вы вообще понимаете, что делаете? Генерируете html c помощью storyJsonToAmp, с полученным результатом не делаете ничего, зачем-то вставили в страницу какой-то левый пример. Что это, зачем это... Ничего не понятно.

Зато стало понятно, почему

Если убрать const ampHtml = storyJsonToAmp(story);, то все работает

В вашем story.json не хватает некоторых обязательных полей - вот storyJsonToAmp и падает с ошибкой. Имели бы привычку смотреть в консоль - узнали бы об этом сами.

Ну и это, storyJsonToAmp возвращает полный html страницы. Чего с ним можно сделать - ну разве что в iframe вставить. Как-то так.

[Luc1fer]

Понимаю ваше негодование, но я месяц вплотную разбираюсь во vue, от сюда куча вытекающих ошибок и вопросов. И ваша помощь очень важна. Я сейчас вывел их просто через cdn. Мне важен только каркас и возможность вставки туда своих переменных с возможностью администрирования. Проблема сейчас лишь в том что каркас выводиться только в App.vue и /public/index.html, но не выводиться в компонентах. К сожалению я не знаю как в story.json управлять данным (добавлять, редактировать, удалять). Поэтому и хочу что бы все было в каркасе vue компонента.