fetching index.html instead of env.js in non-root routes

[pmacaluso3]

Hi Jese, thank you for writing this package! I am teaching a coding bootcamp, and I am having my students use this to manage their env vars locally and on heroku. We are also using react-router-dom for routing and navigation. (I am not an experienced react or webpack developer, so please tell me if I am doing anything silly!)

I've noticed that when navigating to a route other than root, the <script id="react-dotenv" src="./env.js"></script> tag makes a request to the relative route hostname/yourCurrentRoute/env.js

And the server fulfills this request with index.html, which of course blows up

I've been working around it by adding "homepage": "" to my package.json, so that the #react-dotenv tag in my index.html gets a src of "/env.js" instead of "./env.js". This seem to fix the issue, as the request uses an absolute route and always goes to hostname/env.js, no matter the route of my react app. Should "" be the default for homepage instead of "."?

Same issue

[michelleretzlaff]

Same issue, thanks for the solution, this almost drove me mad this morning!

[ludovicm67]

Since this project seems not be maintained at the moment, I created a fork of it some days ago: https://github.com/ludovicm67/react-dotenv, because I was facing the same issue.

Same way to use it, just need to install it using @ludovicm67/react-dotenv instead of react-dotenv.

It will try to load the value of the homepage field in the package.json file, and will fall back to %PUBLIC_URL%, so that it behaves the same way as the favicon and the manifest.

Other points to mention:

• it uses ESM
• dependencies are up-to-date

Just add the tag
< base href="/" target="_self" />
https://www.w3schools.com/tags/tag_base.asp