FormidableLabs / FormidableLabs/spectacle

Docs: SSR-ed page has missing assets

Open
#921 5 comments 0 reactions 0 assignees View on GitHub
🐛 Bug 📖 Documentation
Dominant language
TypeScript
Stars
10.2k
Forks
700
PR merge metrics
No merged PRs in 30d

Description

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

```sh
$ 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:

```jsx

Code Preview







```

It uses this data:

```js
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)

```html


Code Preview









```

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
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.