Docs: SSR-ed page has missing assets

[ryan-roemer]

I’m seeing missing assets in the dev console but not visually on the page once it's up and running. I’ve checked and I get this:

1. in production currently
2. locally on master and
3. previous master before I merged the long running branch.

Reproduction

$ cd docs
$ yarn && yarn clean && yarn build
$ yarn serve

Navigate to http://localhost:4000/open-source/spectacle/ and then look at dev console for lots of 404 assets like our .webm preview.

Notes

There are no visual effects, so what my theory is is that our SSR page has broken assets that we don’t see because client-side takes over before it’s noticeable. For an example, we have this component:

  <Wrapper background={theme.colors.bg}>
    <SectionTitle>Code Preview</SectionTitle>
    <a
      href={preview.demoUrl}
      title="See the live preview"
      target="_blank"
      rel="noopener noreferrer"
    >
      <Video autoPlay muted loop poster={preview.bgStill}>
        <source src={preview.bgWebm} type="video/webm" />
        <source src={preview.bgMp4} type="video/mp4" />
      </Video>
    </a>
  </Wrapper>

It uses this data:

  preview: {
    bgMp4: require('../../assets/demo-presentation.mp4'),
    bgStill: require('../../assets/demo-still.png'),
    bgWebm: require('../../assets/demo-presentation.webm'),
    demoUrl:
      'https://raw.githack.com/FormidableLabs/spectacle/master/examples/one-page.html'
  },

This translates to the following in SSR’ed HTML (when prettified)

                <div class="wrapper__Wrapper-sc-1s2o980-0 iardfv">
                    <h2 class="section-title__SectionTitle-sc-17waq2p-0 kCfJrP">Code Preview</h2>
                    <a href="https://raw.githack.com/FormidableLabs/spectacle/master/examples/one-page.html" title="See the live preview" target="_blank" rel="noopener noreferrer">
                        <video autoplay="" muted="" loop="" poster="/open-source/spectacle/5cffd2695310cc834847858952870fd8.png" class="preview__Video-sc-1h84ylc-0 eUtzXo">
                            <source src="/open-source/spectacle/646e170b7206d8b395cde42f9072ac68.webm" type="video/webm"/>
                            <source src="/open-source/spectacle/c825538146b8873a84c76ee94251e111.mp4" type="video/mp4"/>
                        </video>
                    </a>
                </div>

But if you look in the dist/ directory there is no file whatsoever named 646e170b7206d8b395cde42f9072ac68.webm using find.

Instead what we do have emitted is in relevant part this:

dist/
└── open-source
    └── spectacle
        ├── static
        │   ├── amazing.b764e718.svg
        │   ├── bg_hero_feather.1b0b9393.jpg
        │   ├── browserconfig.xml
        │   ├── button.a7c17f7a.svg
        │   ├── code-preview.6d24653a.svg
        │   ├── demo-presentation.646e170b.webm
        │   ├── demo-presentation.c8255381.mp4
        │   ├── demo-still.5cffd269.png
        │   ├── favicon-32.png
        │   ├── logo_spectacle.7afbf241.png
        │   └── site.webmanifest

[mikebarkmin]

I have to use require('../assets/banner.png').default to make it work in my presentation. Perhaps this helps.

[kale-stew]

@mikebarkmin thank you for the comment - this issue is in reference to our deployed react-static documentation site and not within user-created slides themselves.

@ryan-roemer do SSR'd assets regularly operate like a commit hash? Although I'm not seeing the full 646e170b7206d8b395cde42f9072ac68.webm asset in that dist, there is a demo-presentation.646e170b.webm which appears to be the same asset but named differently. 🤔 If this is consistent, can we reference the other naming convention?

[ryan-roemer]

I’m not exactly sure what is up as I am unfamiliar with the tools used for our docs, but there is definitely something at issue with our build configuration

[ryan-roemer]

What appears to work in development, definitely is not built correctly for production

[ryan-roemer]

Oh, and that asset in question doesn’t have a commit hash, I believe it is a content hash if I were guessing