I'm having a nightmare with using environment variables in my SPFx project. I have:

• a .env in the root of my project
• variables within this file all starting with REACT_APP_
• references to these variables using process.env.REACT_APP_
• restarted gulp, cleaned and built many times
• installed dotenv-webpack
• installed dotenv
• added 'node' to the types in tsconfig.json
• confirmed I can read process.env.NODE_ENV

Any variables inside my .env file just appear as 'undefined' when I try reading them and view with console.log. Is there something I am missing? I thought this was an easy thing to set up.

.env

REACT_APP_TEMPLATE_LIST=text'

WebPart.ts

console.log(process.env.REACT_APP_TEMPLATE_LIST) - This reads as undefined.

Please help!

I'm having a nightmare with using environment variables in my SPFx project. I have:

• a .env in the root of my project
• variables within this file all starting with REACT_APP_
• references to these variables using process.env.REACT_APP_
• restarted gulp, cleaned and built many times
• installed dotenv-webpack
• installed dotenv
• added 'node' to the types in tsconfig.json
• confirmed I can read process.env.NODE_ENV

Any variables inside my .env file just appear as 'undefined' when I try reading them and view with console.log. Is there something I am missing? I thought this was an easy thing to set up.

.env:

REACT_APP_TEMPLATE_LIST='text'

WebPart.ts:

console.log(process.env.REACT_APP_TEMPLATE_LIST)

This reads as undefined.

Please help!