Admin Panel is a Blank Page (Unexpected token '<' (at runtime~main.fa3b5436.js:1:1))

[details=“System Information”]

  • Strapi Version: 4.11.2
  • Operating System: ubuntu 22.0.4
  • Database: Mysql Ver 8.0.33-0ubuntu0.22.04.2 for Linux on x86_64
  • Node Version: v16.20.1
  • NPM Version: 8.19.4
  • Yarn Version: N/A

I have strapi (as a backend) and nextJs (as a frontend) serving from the same domain.
so i used “Subfolder unified” nginx configuration from strapi docuentation (Nginx Proxying | Strapi Documentation), to reverse proxy all the strapi code from domainname.com/backend such .

Problem: now strapi shows “The server is running successfully.” with “production” text, in the url domainname.com/backend, however if i run domainname.com/backend/admin, it does not show strapi login screen. Instead it shows blank in brower, with following error in console.

browser console error:
Uncaught SyntaxError: Unexpected token ‘<’ (at runtime~main.fa3b5436.js:1:1)
main.cebf08e6.js:1 Uncaught SyntaxError: Unexpected token ‘<’ (at main.cebf08e6.js:1:1)

Debugging attempted:

  1. tried reverse proxing only strapi from nginx without nextjs config, and everything works, that is strapi admin login opens in path domainname.com/admin. This proves we have no problem with strapi application server.

  2. now tried running with nextjs reverse proxy code, and nextjs opens at rootdomain, and strapi shows “The server is running successfully.” at url domainname.com/backend

  1. also tried accessing images in public/upload folder with url: http://domainname.com/backend/uploads/placeholder.png and picture does open in browser.

  2. Tried to open strapi admin login sceen with url: http://domainname.com/backend/admin and i get blank screen with console error:

my nginx file: /etc/nginx/sites-available/strapi.conf is:

server {
    # Listen HTTP
    listen 80;
    server_name domainname.com;

    # Next.js
    location / {
        proxy_pass http://127.0.0.1:3000;  # Replace with the appropriate Next.js server address
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    # Strapi API and Admin
    location /backend/ {
         rewrite ^/backend/?(.*)$ /$1 break;
        proxy_pass http://strapi;
        proxy_http_version 1.1;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Host $http_host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_pass_request_headers on;
    }
}

my upstream file: /etc/nginx/conf.d/upstream.conf

# Strapi server
upstream strapi {
    server 127.0.0.1:1337;
}

have added solution in below link: nginx - Admin Panel is a Blank Page (Unexpected token ‘<’ (at runtime~main.fa3b5436.js:1:1)) - Stack Overflow