create-react-app
create-react-app copied to clipboard
facebook
Specify hostname for chunks from React.lazy during development
Hi, I have a problem with getting code splitting using React.lazy to work during development. The problem is that I'm loading in the generated bundle from a different localhost than the CRA is serving the files from. (localhost:9080 vs localhost:3000). However the chunks are loaded without a specified hostname which results in them being loaded from localhost:9080 instead of localhost:3000. I've tried setting HOST, PORT, and PUBLIC_URL in .env.development. All to no avail.
Is there a way to specify the hostname for the fetched chunks generated by using React.lazy? Thanks for any assistance!
Hey @danielweil, you can fix this issue using the HTML base tag. This element allows you to specify the base URL all the relative URLs in your document - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
Based on your description I would assume that you have an HTML file served from localhost:9080 similar to the implementation below. Just add the <base> tag along with your derided host:
<html>
<head>
<base href="http://localhost:3000/">
<script defer src="http://localhost:3000/static/js/bundle.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="root"></div>
</body>
</html>
The aforementioned implementation will lazy load chuncks with the base path of http://localhost:3000/.
Hope this helps!
