ReferenceError: Oxygen is not defined

[teru-mi]

What is the location of your example repository?

No response

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

"@shopify/hydrogen": "^2023.4.6"

What version of Remix are you using?

"@remix-run/react": "^1.15.0"

Steps to Reproduce

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.

Expected Behavior

Oxygen should be defined.

Actual Behavior

ReferenceError: Oxygen is not defined.

[graygilmore]

👋🏻 it works a little bit different in Remix (we need to update the docs!). You can get the Oxygen environment variables from the context in your loader or action:

export async function loader({context}: LoaderArgs) {
  const myStoreName = context.env.MY_STORE_NAME;
}

[builtbyvern]

Can someone commit to updating the docs? It's been months and I spent 2 days tracking down this answer buried in a github issue. lol

[benjaminsehl]

Thanks for the reminder @builtbyvern. Sorry we failed you here! On it.