I have a React client built with webpack. It adds every file to a URL/version/ folder.

However, once the HTML page is loaded, it loads a view making the URL URL/App/Home. After this point, every chunk is loaded from URL/App/Home/version/script.js instead of the intended URL/version/script.js.

I understand this can be related to publicPath in webpack. However, I can only add more folders to the URL, I cannot remove the App/Home or whatever is the current full URL.

This is the webpack config:

output: {
            filename: "[name].js",
            path: path.join(dir, build),
            publicPath: path.join(version, "/"),
        }

My router is a <BrowserRouter> at 5.1.2 without setting any properties.

Another thing that is interesting is that we have hardcoded in the HTML a script such as:

<script defer src="<%= htmlWebpackPlugin.options.prefix%>/script.js"></script>

This script loads fine, even if accessing through URL/App/Home.

I tried many different things, and the only thing that worked is manually setting a base tag in the HTML. However, this doesn't sound like a particularly clean solution especially since we have multiple environments, requiring different tags.

Another solution was using Hash Router, but we don't want the hashes in the URL.

Is there any clean solution to this I am missing or is it a constraint due to how the browser works?