Missing JS dependencies when loading unit problem

[mariajgrimaldi]

Description

We were having the following error when loading a unit with an SGA block in the LMS:

Generating all sorts of errors like:

The grade submission button didn’t work
Files weren’t being uploaded

Read the whole issue here: https://discuss.openedx.org/t/edx-sga-fileupload-is-not-a-function-when-using-cloudfront-for-statics/9270

How to reproduce

We tried reproducing this error in two installations, one that used Cloudfront and the other that didn’t. The error only occurred when using CloudFront to serve static files. After extensive research, we found that CloudFront wasn’t caching the statics, increasing the loading times. So when rendering the unit page, files required by SGA for uploading files like:

https://cloudfront-url/static/js/vendor/jQuery-File-Upload/js/jquery.fileupload.js
https://cloudfront-url/static/js/vendor/jQuery-File-Upload/js/jquery.iframe-transport.js

Weren’t being loaded in time. Therefore, fileupload is not a function.

Suggestions

Branden's suggestion on the blog post resounded with me, we could try to make this xblock more self-contained. What do you folks think?

[arslanashraf7]

@Anas12091101 Could you take a look at this?

[Anas12091101]

@arslanashraf7 I tried setting up S3 and CloudFront in edx-platform for static assets, but not all the assets seem to be uploaded to S3, and the collectstatic command was throwing some errors. I then used https://github.com/hastexo/tutor-contrib-s3, and it seemed to work, but the issue might take some more time to fully resolve (approximately 2-3 days).