1

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.

bavaza
  • 10,319
  • 10
  • 64
  • 103
  • Have you configured the `homepage` in package.json, [as described here](https://create-react-app.dev/docs/deployment/#building-for-relative-paths)? Does craco even implement this? – ajrussellaudio Dec 03 '21 at 18:51
  • @ajrussellaudio. Yes, I followed the guide to the letter. I don't know regarding craco, but it seems like a major drawback if it does not support such a basic feature. – bavaza Dec 04 '21 at 10:54

1 Answers1

1

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;           
}

Similar solutions are discussed here and here.

bavaza
  • 10,319
  • 10
  • 64
  • 103