prefetch.setComponents is not a function

[DanielHabenicht]

Hi I have implemented your component as stated in the readme but it is not working and resulting in this error:

index-93a5cbbe.js:2695 TypeError: prefetch.setComponents is not a function
    at DashjsSettingsControl.componentDidLoad (dashjs-settings-control.entry.js:115)
    at safeCall (index-93a5cbbe.js:1538)
    at postUpdateComponent (index-93a5cbbe.js:1456)
    at postUpdate (index-93a5cbbe.js:1391) undefined

Thanks a lot and hope we can resolve the error.

My Component:

import { Component, h, Host, Build, Element } from '@stencil/core';

@Component({
  tag: 'dashjs-reference-ui',
  styleUrl: 'dashjs-reference-ui.css',
  shadow: false,
})
export class DashjsReferenceUi {
  @Element() el: HTMLElement;
  componentDidLoad() {
    const componentsConfig = [
      {
        tag: 'dashjs-settings-control-modal',
        props: {
          prefetching: true,
        },
      },
      {
        tag: 'ion-modal',
        props: {
          prefetching: true,
        },
      },
      {
        tag: 'ion-content',
        props: {
          prefetching: true,
        },
      },
      {
        tag: 'ion-searchbar',
        props: {
          prefetching: true,
        },
      },
      {
        tag: 'ion-content',
        props: {
          prefetching: true,
        },
      },
      {
        tag: 'ion-grid',
        props: {
          prefetching: true,
        },
      },
      {
        tag: 'ion-row',
        props: {
          prefetching: true,
        },
      },
    ];

    if (Build.isBrowser) {
      // only pre-fetch if it's a real browser
      const prefetch = this.el.querySelector('stencil-component-prefetch') as any;

      prefetch.setComponents(componentsConfig);
    }
  }
  render() {
    return (
      <Host>
        <stencil-component-prefetch />
        <dashjs-api-control></dashjs-api-control>
        <dashjs-settings-control onSettingsUpdated={event => console.log(event)}></dashjs-settings-control>
        <dashjs-player stream-url={''}></dashjs-player>
        <dashjs-statistics></dashjs-statistics>
      </Host>
    );
  }
}

[beck24]

The implementation looks correct - have you included it as a dependency?

npm install @beck24/stencil-component-prefetch

Have you imported it into your project?

import * from '@beck24/stencil-component-prefetch'

[DanielHabenicht]

Importing fixes it. I think the confusion is coming from the import not being mentioned in the Readme.

[Agular]

Yep, it's missing in the Readme.