PUBLIC URL reference gets added twice in the CRA build, static resources fails to load
Closed this issue · 2 comments
Website created using CRA. To build a feature branch running this command. export PUBLIC_URL=pr-preview/pr-${{ github.event.number }} && npx react-scripts build.
In the build file, index.html It is already adding pr-preview/pr-number before static resource path. But while loading, it is referring to the path twice (attached screenshot).
You are referencing your scripts with relative paths e.g.:
<script src="pr-preview/pr-8/static/script.js"></script>
A script src that doesn't start with a slash is relative to the current path: https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_URL#absolute_urls_vs_relative_urls
The current path is /pr-preview/pr-8/, so that would resolve to /pr-preview/pr-8/pr-preview/pr-8/static/..., as you experienced.
To access https://<domain>/pr-preview/pr-8/static/script.js from /pr-preview/pr-8/, your script src needs to be either /pr-preview/pr-8/static/script.js (with a leading slash to make it absolute with an implicit domain), or static/script.js (without a leading slash, to be relative to the current path).
I haven't used create-react-app or even React, so unfortunately I can't help you achieve that in that framework. You might have some luck just adding a leading slash to your PUBLIC_URL, i.e. PUBLIC_URL=/pr-preview/pr-${{ github.event.number }}
Noting that I'm closing this issue as it's not a bug with this Action, but please feel free to respond and I'll help as best I can.