I'm trying to serve a react application (created using craco) from a subdirectory (https://my-domain/app). Following the steps of this guide, and modifying nginx config's location to /app, I do get the static content, but some chunks generate the following error in Chrome:
Uncaught SyntaxError: Unexpected token '<' ... main.b5d3f270.chunk.js:1
Digging in, I noticed nginx returns an html page instead of pure javascript code, and the offending < is (probably) the beginning of <!doctype html>:
<!doctype html>
<html lang="en">
<head>
...
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
...
<script>
!function...
</script
</body>
This only happens when I serve the app from the sub-folder.
Any idea what the problem is?
A similar, unanswered question can be found here.
Indeed, the problem was with nginx configuration, not with React. I was missing a directive to tell nginx to ignore the 'app' part of the URL, and to load files from a different directory. Doing the following solved the problem:
location /app {
alias /usr/share/nginx/html;
try_files $uri $uri/ /app/index.html =404;
}