Fix for relative asset lookup (shouldUseRelativeAssetPaths)

[andys8]

Preface

The issue to import e.g. fonts in css #5162 was closed by "Correctly lookup assets when using a relative build directory" #5163. The fix adds this line, to decide whether the feature should be used or not.

create-react-app/packages/react-scripts/config/webpack.config.prod.js

Line 33 in 7973c81

const shouldUseRelativeAssetPaths = publicPath === './';

There are comments spread that recommend to set "homepage": "." or "homepage": "./" in package.json. See documentation.

Issue

The application is served under different domains prefixed with a path ("/mypath").
Setting "homepage": "./mypath" was working fine, although I'm not sure if this is supported.

But the fix for assets urls in (s)css will not be applied, because of the condition:

create-react-app/packages/react-scripts/config/webpack.config.prod.js

Line 33 in 7973c81

const shouldUseRelativeAssetPaths = publicPath === './';

Fix

We could change the condition and paths will work in the described case.

const shouldUseRelativeAssetPaths = publicPath && publicPath.startsWith('./');

[andys8]

This is how I work around this issue.

1. Make sure the application is served under /mypath/
2. Redirect /mypath to /mypath/
3. Use "homepage": "."

I'll let the issue open to clarify, what the intended behavior should look like and decide if the fix should address the issue, or documentation could be updated.

[andys8]

The same problem appears if react-router is used, so that the application is server under a path, but there is an additional path by the router.

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[andys8]

Any feedback?

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.