URLs are broken after SSR if publicPath is relative

[fenok]

URL objects always represent absolute URLs. It's not a problem if the code is only executed in a browser, since we will simply use the current domain if necessary. We're also good if publicPath is absolute because URLs are naturally absolute in this case.

The problem arises when publicPath is relative and the code is executed on the server side. In this case, URLs will look like this (at least on Windows):

file:///C:/public-path/file.svg

I was able to resolve this by omitting everything before __webpack_public_path__:

module.exports = function () {
    const path = JSON.stringify(this.resourcePath);
    return `export default __webpack_public_path__ + new URL(${path}, import.meta.url).toString().split(__webpack_public_path__)[1]`;
};

It looks extremely hacky though, so I'll probably stick to file-loader instead 😅.

[marella]

Hi, thanks for reporting and sorry for the late response. I haven't used SSR but there seems to be a configuration option in webpack for this - https://webpack.js.org/configuration/module/#moduleparserjavascripturl. Please let me know if setting module.parser.javascript.url to relative fixes this issue.

[fenok]

Indeed, the above-mentioned option fixes the issue. Thank you!

[szympajka]

👍 Helped me as well! Thank you! Can we add this to Readme maybe @marella?

[marella]

Added to README here.