process is not defined on Next Page that use a HOC only on first render - reactjs

Question

I am trying to use a Higher-Order Component to read some values from the server (As environment configuration) in NextJS and React. The versions are 12.0.3 and 17.0.2 respectively. Also I am using Typescript.
I am tryng to use a HOC in order to reuse this functionality. When I was using a getServerSideProps method everything was fine, but now the first render when I start the app is failing. It is important to mention that everytime I just refresh the page, all seems to work correctly
This is my HOC:
// src/components/app/withEnvironment.tsx
import {
EnvironmentValues,
readPublicEnvironmentValues,
} from 'config/environment';
import {NextPage} from 'next';
import {EnvironmentProvider} from 'providers';
export function withEnvironment<TProps>(
Page: NextPage,
): (props: TProps & {environmentValues: EnvironmentValues}) => JSX.Element {
const PageWithEnvironment = ({
environmentValues,
...props
}: TProps & {environmentValues: EnvironmentValues}) => {
return (
<EnvironmentProvider value={environmentValues}>
<Page {...props} />
</EnvironmentProvider>
);
};
(PageWithEnvironment as NextPage).getInitialProps = () => {
return {
environmentValues: readPublicEnvironmentValues(),
};
};
return PageWithEnvironment;
}
And this is how I am trying to implement it:
// src/pages/change-sets/index.tsx
import {withEnvironment} from 'components/app';
import {useEnvironment} from 'providers'
function ChangeSetPage(): JSX.Element {
const environmentValues = useEnvironment();
return (
<div>
<h1>ChangeSetPage</h1>
</div>
);
}
export default withEnvironment(ChangeSetPage);
EnvironmentProvider and useEnvironment are part of a context that I would like to use to use to share values. This is how I defined them:
import {EnvironmentValues} from 'config/environment';
import React, {useContext} from 'react';
const EnvironmentContext = React.createContext<EnvironmentValues>(
{} as EnvironmentValues,
);
export const EnvironmentProvider = EnvironmentContext.Provider;
export const EnvironmentConsumer = EnvironmentContext.Consumer;
export function useEnvironment(): EnvironmentValues {
return useContext(EnvironmentContext);
}
Finally, the method readPublicEnvironmentValues only try to extract ENV values from the server, but as I mentioned on the first load process variable is always undefined;
export function readPublicEnvironmentValues(): EnvironmentValues {
// Here is where the exception throws becaouse of there is no process variable only at first attempt
const typedOptions = process.env as EnvironmentOptions;
const currentEnv = ENVIRONMENTS.find(
e => e === typedOptions.NEXT_PUBLIC_ENV || e === typedOptions.APP_ENV,
);
if (currentEnv) {
const values: EnvironmentValues = {
currentEnv,
skipAuth:
typedOptions.DEBUG === 'true' &&
typedOptions.SKIP_AUTH_ON_DEBUG === 'true',
};
if (typedOptions.BACKEND_PIVOT)
values.backendPivotApi = typedOptions.BACKEND_PIVOT;
if (typedOptions.BACKOFFICE_PIVOT)
values.backofficePivotApi = typedOptions.BACKOFFICE_PIVOT;
return values;
} else {
throw 'It is necessary to define an environment for the application. Please set NEXT_PUBLIC_ENV or APP_ENV';
}
}
It seems the getInitialProps method is being executed on the client side. This is the error message: