ReferenceError: Oxygen is not defined with Hydrogen

64 Views Asked by At

I am developing with Shopify's Hydrogen and Oxygen.

I have written the following code:

export async function action({ request, context }: { request: Request, context: AppLoadContext }) {
  // Get environment variable
  const myStoreName = Oxygen.env.MY_STORE_NAME

  if (!myStoreName) {
    console.error('Error: Oxygen.env.MY_STORE_NAME is not defined')
    return redirect('/errorPage')
  }

  // Process using myStoreName...
}
  • package.json
"@shopify/hydrogen": "^2023.4.6",
"@shopify/remix-oxygen": "^1.1.1",

However, when I run the above code, I get an error saying ReferenceError: Oxygen is not defined.

I referred to the Shopify documentation and tried to get the environment variables using Oxygen.env, but I get the above error.

https://shopify.dev/docs/custom-storefronts/oxygen/storefronts/environment-variables

Step 1: Create an environment variable"
From your Shopify admin, under Sales channels, click Hydrogen.
From the Hydrogen storefront page, click the storefront that you want to change.
Click Storefront settings > Environments and variables.
Beside Variables, click Add variable.
Under Key, type MY_STORE_NAME.
Under Value, type My great shoe store.
Under Environments, click Search for environments.
Check Production.
Click Save.

I also did the type definition as follows:


declare global {
  const Oxygen: {
    env: {
      [key: string]: string;
    };
  };
}

But I still get the same error.

Does anyone have any advice on this issue? Thank you in advance.

0

There are 0 best solutions below