.env and react-dotenv not reading the right file when calling nested route

Question

So have a strange problem. When I try to access a nested route directly, .env fails to read variables, and I get the following error message on the console log

Uncaught SyntaxError: Unexpected token '<' (at env.js:1:1)

and:

bundle.js:59 Uncaught TypeError: Cannot read properties of undefined (reading 'FCF_FEEDER_URL')
    at ./src/App.tsx (bundle.js:59:66)
    at options.factory (bundle.js:82050:31)
    at __webpack_require__ (bundle.js:81473:33)
    at fn (bundle.js:81707:21)
    at ./src/index.tsx (bundle.js:1171:62)
    at options.factory (bundle.js:82050:31)
    at __webpack_require__ (bundle.js:81473:33)
    at bundle.js:82696:37
    at bundle.js:82698:12

Problem is that the code in App.tsx can't read env.FCF_FEEDER_URL.

But the thing I can't understand is why. If I start from localhost:8080/ and navigate to the same functionality, it works, it is only if I go straight to localhost:8080/titles/add that it fails.

So tested putting the exact same module but at top level (localhost:8080/add), and it works.

                  <Routes>
                        <Route path="/" element={ <WelcomePage />} />
                        <Route path="contactus" element={ <ContactUsPage />} />
                        <Route path='categories' element={ <Outlet />} >
                            <Route index element={ <ProtectedRoute component={CategoriesMainPage} />} />
                            <Route path="add" element={ <ProtectedRoute component={CategoriesModifyAddPage} />} />
                            <Route path=":id" element={ <ProtectedRoute component={CategoriesModifyAddPage} />} />
                        </Route>
                      <Route path='titles' element={ <Outlet />} >
                          <Route index element={ <ProtectedRoute component={TitlesMainPage} />} />
                          <Route path="add" element={ <ProtectedRoute component={TitlesModifyAddPage} />} />{/* <--- FAILS  */}
                          <Route path=":id" element={ <ProtectedRoute component={TitlesModifyAddPage} />} />
                      </Route>
                      <Route path="add" element={ <ProtectedRoute component={TitlesModifyAddPage} />} /> {/* <--- Works a charm  */}
                        <Route path="*" element={
                            <div>
                                <h2>This page or URL seems wrong (404)</h2>
                                <p>If its not a type, please contact support</p>
                            </div>
                        } />
                  </Routes>

I assume that the real problem is that the system is looking for the .env file in the wrong place.

I assume that this is related to react-dotenv looking for the .env file in the wrong place, but no clue what I can do to prove it.

This is the package.json section

  "scripts": {
    "start": "react-dotenv && PORT=8082 react-scripts start",
    "build": "react-dotenv && PORT=8082 react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "react-dotenv": {
    "whitelist": [
      "FCF_FEEDER_URL",
      "FCF_FEEDER_NAME",
      "AUTH0_DOMAIN",
      "AUTH0_CLIENTID",
      "AUTH0_REDIECTURI"
    ]
  },

Answer 1

I have been struggling to find a resolution for this and managed to get one. The issue is that on nested routes request uses an absolute route and always goes to hostname/env.js, no matter whatever the route of the react app. You can check this from network tab.

To resolve this add this tag inside the head tag of your index.html

<base href="/" target="_self" />