Server-generated bundle script tag is wrong when the initial URL is not the root page #82
Description
Versions:
@roguejs/app @ 0.9.6@roguejs/cli @ 0.9.8
Expected result: The generated bundle URL is always the absolute path /bundle.js.
Actual result: The generated bundle URL is relative to the current URL.
Description of the problem:
This is symptomatically-similar #61, but it's not quite the same thing, as I'm not using razzle.
The server-generated script tag to load the bundle is just <script src=bundle.js defer /></script>. Suppose you have a react-router-dom route such as /user/:id. When navigating to that route directly (ie. directly going to localhost:3000/user/1234 in the browser), the browser sees the generated bundle URL as being loaded relative to the current path and tries to load localhost:3000/user/bundle.js which does the wrong thing.
I wrote a 5-second patch_rogue_server.sh to solve this the easy way, but it would be nice if the real problem was fixed correctly (even if it's just a dumb problem on my end ><) rather than just patched over.
#!/bin/bash
# Sets the bundle path to be absolute (/bundle.js) rather than relative (bundle.js)
# Also wrap the bundle in quotes just to be safe
# ... After writing "bundle" so much, it no longer feels like a real word
sed -i -e 's|"<script src=" + bundleUrl + " defer /></script>"|"<script src=\\\"/" + bundleUrl + "\\\" defer /></script>"|' \
./node_modules/\@roguejs/app/dist/web/server*.jsSteps to reproduce:
- Create a new rogue app as described in the README
- Create some routes with
react-router-dom - Directly navigate to a subroute (ie. manually type the URL in a new tab)
- Observe similar symptoms to bundlerUrl: bundle.js: Uncaught SyntaxError: Unexpected token < #61
- Check page source, see that bundle path is relative rather than absolute