FormidableLabs / spectacle

A React-based library for creating sleek presentations using JSX syntax that gives you the ability to live demo your code.
https://commerce.nearform.com/open-source/spectacle/
MIT License
9.77k stars 693 forks source link

Docs: SSR-ed page has missing assets #921

Open ryan-roemer opened 4 years ago

ryan-roemer commented 4 years ago

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 commented 4 years ago

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

kale-stew commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

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

ryan-roemer commented 4 years ago

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