Looks like PUBLIC_URL overrides REACT_APP_BASEURL env variable in fetch

[aloeugene]

Problem: After upgrading to CRA v5 I've observed a weird issue with using fetch on URLs starting with REACT_APP_BASEURL.

---

Setup:

// .env.development

PUBLIC_URL='http://localhost:3011/cc'
REACT_APP_BASEURL='http://localhost:3011'

// config.ts

export const config = {
  apiBaseUrl: process.env.REACT_APP_BASEURL,
};

// App.tsx

const urlToFetch = `${config.apiBaseUrl}/some/path`;

---

How it was working before upgrading:

• Request in browser looked like GET http://localhost:3011/some/path and resolved completely fine.

How it's working after upgrading:

• Request in browser looks like GET http://localhost:3011/cc/some/path and throws 404 because such URL isn't supported by the BE service.

---

No other changes were applied to the code. What should I do and is that a bug or something not mentioned in the migration guides?

[tombakerjr]

To add to this, it appears the WP dev server middleware to redirect to PUBLIC_URL when the path doesn't match is interfering with proxied API requests. I generated a fresh test app and ejected, and commenting out this line solved the above problem, though of course that would take away the benefit of the redirect. https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/config/webpackDevServer.config.js#L125

Is there some way to have both?

[aloeugene]

Cannot reproduce that anymore for some reason... Probably some react-scripts dependency update made it work fine.