Problem setting relative PUBLIC_URL in dev mode

Created by: CaptainChemist

I know that there was a new feature request for being able to set the PUBLIC_URL in development mode, but I have not been able to get it to work and when I have delved into the source code, I think there is an issue with how getPublicUrlOrPath function from react-dev-utils is being called which would not allow the relative pathing to work while it is in development mode.

From the react-scripts/config/path.js file the following definition is how the contentBasePublicPath gets defined from the webpackDevServer.config.js file:

const publicUrlOrPath = getPublicUrlOrPath(
  process.env.NODE_ENV === 'development',
  require(resolveApp('package.json')).homepage,
  process.env.PUBLIC_URL
);

For the purposes of this explanation, let's assume that the package.json homepage and PUBLIC_URL are the same and defined as ./. When using react-scripts start, NODE_ENV is always equal to development so this first parameter will always be true.

Looking at the getPublicUrlOrPath.js file, we see that since we are defining PUBLIC_URL, we will execute this first block of code:

  if (envPublicUrl) {
    // ensure last slash exists
    envPublicUrl = envPublicUrl.endsWith('/')
      ? envPublicUrl
      : envPublicUrl + '/';

    // validate if `envPublicUrl` is a URL or path like
    // `stubDomain` is ignored if `envPublicUrl` contains a domain
    const validPublicUrl = new URL(envPublicUrl, stubDomain);

    return isEnvDevelopment
      ? envPublicUrl.startsWith('.')
        ? '/'
        : validPublicUrl.pathname
      : // Some apps do not use client-side routing with pushState.
        // For these, "homepage" can be set to "." to enable relative asset paths.
        envPublicUrl;
  }

The issue with this block of code, is that it will always return / in this configuration because isEnvDevelopment will be true as mentioned above, and since we defined our PUBLIC_URL as ./, the second part of the ternary operator will also evaluate to true which which will return /.

This same problem also occurs even if you don't define the PUBLIC_URL as shown in the second block of this function:

  if (homepage) {
    // strip last slash if exists
    homepage = homepage.endsWith('/') ? homepage : homepage + '/';

    // validate if `homepage` is a URL or path like and use just pathname
    const validHomepagePathname = new URL(homepage, stubDomain).pathname;
    return isEnvDevelopment
      ? homepage.startsWith('.')
        ? '/'
        : validHomepagePathname
      : // Some apps do not use client-side routing with pushState.
      // For these, "homepage" can be set to "." to enable relative asset paths.
      homepage.startsWith('.')
      ? homepage
      : validHomepagePathname;
  }

You can see that if isEnvDevelopement is true and the homepage starts with . then it returns /, so the behavior will be the same here as well.

So in summary although work was done in 3.4.0 to allow setting PUBLIC_URL in development, I can't get that behavior to work using the relative path . as you'd expect.