Can't load js asset on site hosted with AWS S3 and CloudFront

Help
1

Jekyll newbie here with little to no web and javascript experience. I’m using the Hydejack theme for my Jekyll site, and I’m hosting it on a AWS S3 bucket hand routing traffic using a AWS CloudFront distribution.

Symptoms

The site works perfectly well when I test it locally, serving the site through nginx. But the actual site on S3+CloudFront has some issues: https://www.olavur.consulting/

The web developer console log gives the error messages shown below.

Error message

Uncaught (in promise) ChunkLoadError: Loading chunk 3 failed.
(missing: https://www.olavur.consulting/assets/js/drawer-hydejack-9.1.6.js)
    e https://www.olavur.consulting/assets/js/hydejack-9.1.6.js:13
    <anonymous> https://www.olavur.consulting/assets/js/hydejack-9.1.6.js:28
    o https://www.olavur.consulting/assets/js/hydejack-9.1.6.js:13
    <anonymous> https://www.olavur.consulting/assets/js/hydejack-9.1.6.js:13
    <anonymous> https://www.olavur.consulting/assets/js/hydejack-9.1.6.js:13
hydejack-9.1.6.js:13:1115
Uncaught (in promise) ChunkLoadError: Loading chunk 16 failed.
(missing: https://www.olavur.consulting/assets/js/vendors~push-state-hydejack-9.1.6.js)
    e https://www.olavur.consulting/assets/js/hydejack-9.1.6.js:13
    <anonymous> https://www.olavur.consulting/assets/js/hydejack-9.1.6.js:28
    o https://www.olavur.consulting/assets/js/hydejack-9.1.6.js:13
    <anonymous> https://www.olavur.consulting/assets/js/hydejack-9.1.6.js:13
    <anonymous> https://www.olavur.consulting/assets/js/hydejack-9.1.6.js:13

It seems that the main javascript:

  • https://www.olavur.consulting/assets/js/hydejack-9.1.6.js

Tries to dynamically load some other javascript assets, in this case:

  • https://www.olavur.consulting/assets/js/drawer-hydejack-9.1.6.js
  • https://www.olavur.consulting/assets/js/vendors~push-state-hydejack-9.1.6.js

But for whatever reason is unable to do so, resulting in a ChunkLoadError.

What I’ve tried

I’ve tried to use the most lenient possible CSP and CORS settings, so ensure that the requests aren’t blocked. I can see that the browser is downloading all the assets, the HTTP GET requests to the js assets are successful.

2

no idea why that is happening, looks like it is fine though I have not seen someone import js files like that before - but I am not a JS expert, I assume the author has a good reason.

One tip though is AWS Amplify works really well with jekyll - it does the cloudfront part for you and you can have it build/deploy when you commit to your repo.

You might try asking the theme creator about your error.

3

Thank you for the reply @rdyar. If I use AWS Amplify, would I not still have to tweak the CloudFront settings? Despite following a tutorial for setting up S3+CloudFront for a Jekyll site, it was definitely not plug-and-play. Maybe Amplify does the heavy lifting so that it should be plug-and-play?

I did write an issue on the Hydejack developer’s GitHub, but it doesn’t look like they pay much attention to bug reports or questions.

4

Amplify has been plug and play for me, works great, very easy to setup. Before that using s3 with CF was a pain and no fun to update.