Django/React - Nginx not serving correct Javascript files

Question

I'm trying to migrate an existing service to another server. It's a combination of Django, Postgres, RabbitMQ, Redis, and React, served through WSGI (Gunicorn) and reverse proxied through Nginx. Celery is also involved.

The codebase and Nginx configuration is the same, but on one server, it won't load certain pages because scripts error out.

These are the errors I get in the Browser JS Console:

Uncaught Error: Script error for: extraformat/extraformat-components.jsx http://requirejs.org/docs/errors.html#scripterror

Uncaught Error: Script error for: comments/components.jsx

Uncaught Error: Load timeout for modules: jsx!extraformat/extraformat-components_unnormalized3,jsx!comments/components_unnormalized4,jsx!extraformat/extraformat-components,jsx!comments/components

Nginx Configuration

Relevant excerpt:

 location /static/ { alias /var/www/app/static/; if ($query_string) { expires max; } } location /data/ { alias /var/www/app/data/; if ($query_string) { expires max; } } location / { proxy_pass_header Server; proxy_set_header Host $http_host; proxy_redirect off; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Scheme $scheme; proxy_connect_timeout 30; proxy_read_timeout 30; proxy_pass http://127.0.0.1:8000/; } 

I'm really not sure where to start. I have Gunicorn and Celery set to debug mode, but they're not producing any real logs.

I see my request to access the page pop up in access logs for Nginx, but there's nothing useful there.

Any ideas?

Edit: There's a warning right before the "Uncaught" error which seems to contain the real error which is then caught by require.js:

Loading failed for the with source “https://website.tld/static/edit/js/aloha/plugins/booktype/extraformat/lib/extraformat-components.jsx.js”.

I don't know much about React - why is it looking for a .jsx.js file? Can the browser even load .jsx files?

There's nothing in Nginx error logs, but there is this in the access log:

 [15/Aug/2024:05:45:18 +0000] "GET /she-built-it/_edit/ HTTP/1.1" 200 35728 "https://website.tld/she-built-it/_info/" "Mozilla/5.0 (X11; Linux x86_64; rv:129.0) Gecko/20100101 Firefox/129.0" 

Edit 2: I just figured out what the issue was.

I had configured the site incorrectly in the settings I was passing to Django/Gunicorn. It was the previous site instead of my new test site. After changing it to my test site, deleting the static directory, running collectstatic, and restarting nginx, celery, and gunicorn, it now works!

Answer 1

1. ensure that the static files are correctly collected and served. did you run python manage.py collectstatic on your new server to make sure all static assets are properly in place.
2. check the alias paths in your nginx configuration.check /var/www/app/static/ folder actually contains the files being requested.
3. check the trailing / in proxy pass, try to remove that and test this part in your nginx.conf

change this proxy_pass http://127.0.0.1:8000/; to proxy_pass http://127.0.0.1:8000;