React Public URL env variable

Question

I am trying to access images in my public folder after build, and so I went ahead and created a PUBLIC_URL. I am however having trouble with the filepath structure as the images don't seem to be located.

My PUBLIC_URL is: PUBLIC_URL = '/Assets/color/'

I reference it in my components as such:

  img_src = weather_array.includes(data.weather_code.value)
    ? (img_src = `${process.env.PUBLIC_URL}${data.weather_code.value}_day.svg`)
    : (img_src = `${process.env.PUBLIC_URL}${data.weather_code.value}.svg`);

Here is a picture of the file structure for reference.

score 1 · Answer 1 · answered Jun 22 '20 at 18:32

The process variable only works on Node.js. In React, so in the browser, we can't use that variable. However, we can go with using Webpack to access the process variable. The DefinePlugin helps us to pass the server-side variables into client-side while building. Please see

score 0 · Answer 2 · answered Jun 03 '22 at 17:57

In my experience, webpack will replace process.env.PUBLIC_URL with a fixed value during build. So, it may be that you evaluating it, additionaly, causes problems.

Meaning it should be process.env.PUBLIC_URL in the code, not ${process.env.PUBLIC_URL}.

E.g., with my package.json looking like this (the homepage setting influences PUBLIC_URL)...

{
  "name": "meetup-app",
  "version": "0.1.0",
  "private": true,
  "homepage": "/uvs",

... and this below code in App.js...

function App() {
  const basePath = process.env.PUBLIC_URL;
  return (
    <div className="App">
      <Layout>
        <Suspense fallback={<p>Loading...</p>}>
          <Routes>
            <Route path={basePath} exact element={<AllMeetupsPage />}></Route>
            <Route
              path={basePath + "/new-meetup"}
              element={<NewMeetupsPage />}
            ></Route>
            <Route
              path={basePath + "/favorites"}
              element={<FavoritesMeetupsPage />}
            ></Route>
          </Routes>
        </Suspense>
      </Layout>
    </div>
  );
}

... the build output will have this content (I re-formatted it):

("ul", {
    children: [(0, u.jsx)("li", {
        children: (0, u.jsx)(a.rU, {
            to: s,
            children: "All Meetups"
        })
    }), (0, u.jsx)("li", {
        children: (0, u.jsx)(a.rU, {
            to: "/uvs/new-meetup",
            children: "Add New Meetup"
        })
    }), (0, u.jsx)("li", {
        children: (0, u.jsxs)(a.rU, {
            to: "/uvs/favorites",
            children: ["My Favorites", (0, u.jsx)("span", {className: c, children: e.totalFavorites})]
        })
    })]
})

(Sorry if this is utter nonsense, I'm a total newbie, only some 2 weeks into front end development.)

React Public URL env variable

2 Answers2

Linked