Uncaught ReferenceError: global is not defined

[sid2364]

What is the location of your example repository?

https://github.com/Nosto/shopify-hydrogen-demo, branch: ads-4544-upgrade-major-version-demo-2

Which package or tool is having this issue?

Oxygen

What version of that package or tool are you using?

@shopify/hydrogen: 2024.4.1, @shopify/remix-oxygen: 2.0.4, @shopify/mini-oxygen: 3.0.1

What version of Remix are you using?

2.9.1

Steps to Reproduce

I'm trying to upgrade my Remix and Hydrogen version to the latest (2.9.1 and 2024.4.1, respectively). And so also need to upgrade to latest versions of dependent libraries, one of those was mini-oxygen, which is now a requirement.

When I try to run locally with shopify hydrogen dev --codegen, I get an error with Miniflare:

Environment variables injected into MiniOxygen:

SESSION_SECRET                from local .env
PUBLIC_STOREFRONT_API_TOKEN   from local .env
PUBLIC_STORE_DOMAIN           from local .env
╭─ error ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                                                                 │
│  The Workers runtime failed to start. There is likely additional logging output above.                                                                          │
│                                                                                                                                                                 │
│  To investigate the issue, examine this stack trace:                                                                                                            │
│    at #assembleAndUpdateConfig (miniflare/dist/src/index.js:8868)                                                                                               │
│      throw new MiniflareCoreError(                                                                                                                              │
│    at processTicksAndRejections (node:internal/process/task_queues:95)                                                                                          │
│    at runWith (miniflare/dist/src/index.js:3420)                                                                                                                │
│      return await awaitable;                                                                                                                                    │
│    at async #waitForReady (miniflare/dist/src/index.js:8925)                                                                                                    │
│      await this.#initPromise;                                                                                                                                   │
│    at async startWorkerdServer (@shopify/cli-hydrogen/dist/lib/mini-oxygen/workerd.js:89)                                                                       │
│      const { workerUrl, inspectorUrl } = await miniOxygen.ready;                                                                                                │
│    at async runPreview (@shopify/cli-hydrogen/dist/commands/hydrogen/preview.js:69)                                                                             │
│      const miniOxygen = await startMiniOxygen(                                                                                                                  │
│    at run (@shopify/cli-hydrogen/dist/commands/hydrogen/preview.js:28)                                                                                          │
│      await runPreview({                                                                                                                                         │
│    at runCommand (@shopify/cli/dist/chunk-3MMF34G4.js:210764)                                                                                                   │
│      const result = await command.run(argv, this);                                                                                                              │
│    at run (@shopify/cli/dist/chunk-3MMF34G4.js:212426)                                                                                                          │
│      return await config.runCommand(id, argvSlice, cmd);                                                                                                        │
│                                                                                                                                                                 │
╰─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

    MiniflareCoreError [ERR_RUNTIME_FAILURE]: The Workers runtime failed to start. There is likely additional logging output above.
    Code: ERR_RUNTIME_FAILURE

But this isn't all, I thought perhaps I could do an Oxygen deployment and my environment (for e.g. workerd) would not be a hinderance. While doing this I get the following, even more obscure error:

Deploying to Oxygen..
Deployment failed, error: Uncaught ReferenceError: global is not defined
  at worker.mjs:19:32086
  at worker.mjs:19:36089
  at worker.mjs:1:246
  at worker.mjs:81:30979
╭─ error ──────────────────────────────────────────────────────────────────────╮
│                                                                              │
│  Uncaught ReferenceError: global is not defined                              │
│    at worker.mjs:19:32086                                                    │
│    at worker.mjs:19:36089                                                    │
│    at worker.mjs:1:2[46](https://github.com/Nosto/shopify-hydrogen-demo/actions/runs/8938871131/job/24553842268#step:6:47)                                                       │
│    at worker.mjs:81:30979                                                    │
│                                                                              │
│                                                                              │
│  Retrying the deployment may succeed.                                        │
│                                                                              │
│  Next steps                                                                  │
│    • If the issue persists, please check the Shopify status page [1] for     │
│      any known issues.                                                       │
│                                                                              │
╰──────────────────────────────────────────────────────────────────────────────╯
[1] https://status.shopify.com/
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
Verifying deployment has been completed ...
Error: Process completed with exit code 1.

This doesn't really point me to anything at all, I've played around with a few different versions but always come back to this error. Could someone please enlighten me around what could be happening here?

My Github action that has this error (as well as my Shopify Hydrogen demo store) is here: https://github.com/Nosto/shopify-hydrogen-demo/actions/runs/8938871131/job/24553842268. The branch in which I'm upgrading to the latest version is here: Nosto/shopify-hydrogen-demo#41 (PR for diff of changes from a fully functional main branch).

Expected Behavior

Oxygen deployment should work.

Actual Behavior

Using mini-oxygen, version 3.0.1, results in an unexpected error (described above)

[frandiox]

at async runPreview (@shopify/cli-hydrogen/dist/commands/hydrogen/preview.js:69)

Given the stack, it seems you're running the preview command instead of dev?

Try running the dev or preview commands with the --verbose flag, it should show you more Miniflare logs that might help find the issue.

--

Also, for upgrading we recommend the command h2 upgrade, it should choose the dependency version appropriately.

[sid2364]

Thanks a lot @frandiox for taking a look! Yes, sorry I'd mixed up the preview and dev commands, I get the error is the same for both though.

With the --verbose flag I get the below in my local. This seems to be coming from the js-sha256 module, but I'm not sure it's linked to my .env, as it's the same error in my local but also via Oxygen deployment when I push to the branch.

workerd/server/server.c++:3189: info: Inspector is listening
service core:user:hydrogen: Uncaught ReferenceError: global is not defined
  at index.js:28153:27
  at index.js:28245:7 in node_modules/js-sha256/src/sha256.js
  at index.js:10:50
  at index.js:39859:32
MiniflareCoreError [ERR_RUNTIME_FAILURE]: The Workers runtime failed to start. There is likely additional logging output above.
    at #assembleAndUpdateConfig (/Users/siddharthsahay/Work/Git/shopify-hydrogen-demo/node_modules/miniflare/dist/src/index.js:8868:13)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Mutex.runWith (/Users/siddharthsahay/Work/Git/shopify-hydrogen-demo/node_modules/miniflare/dist/src/index.js:3420:16)
    at async #waitForReady (/Users/siddharthsahay/Work/Git/shopify-hydrogen-demo/node_modules/miniflare/dist/src/index.js:8925:5)
    at async startWorkerdServer (file:///Users/siddharthsahay/Work/Git/shopify-hydrogen-demo/node_modules/@shopify/cli-hydrogen/dist/lib/mini-oxygen/workerd.js:89:39)
    at async safeStartMiniOxygen (file:///Users/siddharthsahay/Work/Git/shopify-hydrogen-demo/node_modules/@shopify/cli-hydrogen/dist/commands/hydrogen/dev.js:172:18)
    at async onBuildFinish (file:///Users/siddharthsahay/Work/Git/shopify-hydrogen-demo/node_modules/@shopify/cli-hydrogen/dist/commands/hydrogen/dev.js:255:13)

About the h2 upgrade command, could you please point me to some docs around this? Would you mean the H2 db in this case? Just want to make sure I set it up right.

[frandiox]

About the h2 upgrade command, could you please point me to some docs around this? Would you mean the H2 db in this case? Just want to make sure I set it up right.

I mean the CLI command, shopify hydrogen upgrade or h2 upgrade if you have the shortcut installed. Docs: https://shopify.dev/docs/api/shopify-cli/hydrogen/hydrogen-upgrade

This command ensures you get valid versions of each package when updating.

With the --verbose flag I get the below in my local. This seems to be coming from the js-sha256 module, but I'm not sure it's linked to my .env, as it's the same error in my local but also via Oxygen deployment when I push to the branch.

I don't think this has to do anything with .env. One of your dependencies is probably accessing global.something and that breaks in workers environments because global is a Node.js-only API. The standard would be globalThis.something.

You could try polyfilling it with something like globalThis.global = globalThis or similar but you need to ensure it runs before the dependency accesses it.

That said, I see in your repo that you are bumping Hydrogen and Remix many versions without changing the app code. A lot of things have been updated that need changes in-app. You can see this in the changelogs of each package or, if you use h2 upgrade command, a markdown file will be generated with the required changes to your code.
However, it might be simpler for you to start from scratch with a new Hydrogen template and apply your changes, if it's not a lot. You can start again with npm create @shopify/hydrogen@latest with the skeleton template, or add --template demo-store to get Hydrogen's demo store.