The following implementation of msal works without issues when I run it on localhost. But when I deploy it to an Azure App Service the clientId and/or tenantID seems to become undefined, even when I tried experimenting with placing the id strings directly into the file. Here is the error I get when i try to click the login button in production:

GET https://login.microsoftonline.com/undefined/v2.0/.well-known/openid-configuration 400 (Bad Request)

Uncaught (in promise) ClientAuthError: endpoints_resolution_error: Error: could not resolve endpoints. Please check network and try again. Detail: ClientAuthError: openid_config_error: Could not retrieve endpoints. Check your authority and verify the .well-known/openid-configuration endpoint returns the required endpoints. Attempted to retrieve endpoints from: https://login.microsoftonline.com/undefined/v2.0/.well-known/openid-configuration
    at t [as constructor] (_app-3866deb516d5bf6f9628.js:1)
    at new t (_app-3866deb516d5bf6f9628.js:1)
    at Function.t.createEndpointDiscoveryIncompleteError (_app-3866deb516d5bf6f9628.js:1)
    at Function.<anonymous> (_app-3866deb516d5bf6f9628.js:1)
    at _app-3866deb516d5bf6f9628.js:1
    at Object.throw (_app-3866deb516d5bf6f9628.js:1)
    at s (_app-3866deb516d5bf6f9628.js:1)

And here is the msal implementation:

import * as msal from "@azure/msal-browser";

function redirUri() {
    if (process.env.NODE_ENV == "development") {
        return "/"
    } else {
        return "https://somewebsitename.azurewebsites.net/"
    }
}

const msalConfig = {
    auth: {
        clientId: process.env.NEXT_PUBLIC_AZURE_AD_CLIENT_ID,
        authority: `https://login.microsoftonline.com/${process.env.NEXT_PUBLIC_AZURE_AD_TENANT_ID}`,
        redirectUri: redirUri()
    }
};

const msalInstance = new msal.PublicClientApplication(msalConfig);

export { msalInstance }

What is the correct way to do this?