CODEWITHSUNDEEP
reactjs
Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17610

Reactjs process.env.PUBLIC_URL is not working

In react I use below code to load configuration json but I got error if I add

console.log(process.env.PUBLIC_URL);

when I remove it , it works.

Error is

ReferenceError: process is not defined

const config = {};
export default config;

const SetConfigFile = () => {
    console.log(process.env.PUBLIC_URL);
    switch (process.env.NODE_ENV) {
        case "development":
            return "config.dev.json";
        case "test":
            return "config.test.json";
        case "production":
            switch(process.env.PUBLIC_URL){
                case "https://example.com":
                    return "config.devp.json"
                default:
                    return "config.prod.json";
            }                     
        default:
            return "config.default.json";
    }
}

const Load = () => {
    return fetch(SetConfigFile())
        .then(result => result.json())
        .then((newconfig) => {
            for (let prop in config) {
                delete config[prop]
            }
            for (let prop in newconfig) {
                config[prop] = newconfig[prop];
            }
            return config;
        });
}
export { Load }

Why can't I reach public URL here ? What is my missing?

Thanks in advance

Upvotes: 3

Views: 17397

Answers (2)

Gustavo Iosimura
Gustavo Iosimura

Reputation: 28

I was stuck at the same problem when trying to access images from public.

What I did was to add the following code to my webpack config file:

//webpack.config.js
plugins: [
   //
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development'),
      'process.env.PUBLIC_URL': JSON.stringify('http://localhost:8080/public')
  })
  ]

Upvotes: 0

Jimmy Soussan
Jimmy Soussan

Reputation: 722

I believe the name of your env variable must always start with REACT_APP

so try to rename it REACT_APP_PUBLIC_URL

If that's not it, this might be linked to your webpack config you can check this stack overflow answer : https://stackoverflow.com/a/41359607/16956436

Upvotes: 5

Related Questions