Process.env.<variable> are undefined

[Krugerro]

What type of issue is this?

Question

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Target SharePoint environment

SharePoint Online

What browser(s) / client(s) have you tested

• [ ] 💥 Internet Explorer
• [X] 💥 Microsoft Edge
• [ ] 💥 Google Chrome
• [ ] 💥 FireFox
• [ ] 💥 Safari
• [ ] mobile (iOS/iPadOS)
• [ ] mobile (Android)
• [ ] not applicable
• [ ] other (enter in the "Additional environment details" area below)

Additional environment details

• browser version: Version 122.0.2365.80 (Official build) (64-bit)
• SPFx version: 1.17.4
• Node.js version: 16.18.1
• React version: 17.0.1
• TypeScript version: 4.5.5

Issue description

My general aim is to use process.env<variableName> during build locally during development and in devops pipleines during deployment to inject some secrets and passwords. My story about this is pretty same as here (i'm not the author) so I tried every link touching this subject.

What I learned is: in gulpfile none of plugins folowing this is truthy in condition plugin instanceof webpack.DefinePlugin thus new instance of DefinePlugin is pushed which yields to error: When I manually change plugins array adding in gulpfile (code is simplified) where getClientEnvironment().stringified is: My console.log(process.env.SPFX_COMPUTER_VISION_KEY) is undefined in any tsx file.

The only variable defined in DefinePlugin I can access is DEBUG.

I even started to edit node_modules\@microsoft\spfx-heft-plugins\lib\plugins\webpackConfigurationPlugin\WebpackConfigurationGenerator.js where in DefinPlugin argument I added my variables which still gives undefined.

How can I inject my variables to process.env and use them during build?

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.