Quickstart dev fails with EPIPE error

[hsdonkin]

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?

2024.4.1

What version of Remix are you using?

2.8.0

Steps to Reproduce

npm create @shopify/hydrogen@latest -- --quickstart
cd hydrogen-quickstart
npm run dev

Expected Behavior

The development server should start with mock shop data

Actual Behavior

Error is thrown:

> hydrogen-quickstart@1.0.10 dev
> npx shopify hydrogen dev --codegen


Environment variables injected into MiniOxygen:

SESSION_SECRET        from local .env
PUBLIC_STORE_DOMAIN   from local .env

  ➜  Local:   http://localhost:3000/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help


╭─ success ──────────────────────────────────────────────────────────────────────╮
│                                                                                │
│  View Hydrogen app: http://localhost:3000/ [1]                                 │
│                                                                                │
│  View GraphiQL API browser:                                                    │
│  http://localhost:3000/graphiql                                                │
│                                                                                │
│  View server network requests:                                                 │
│  http://localhost:3000/subrequest-profiler                                     │
│                                                                                │
╰────────────────────────────────────────────────────────────────────────────────╯
[1] http://localhost:3000/

Unhandled Rejection:  Error: write EPIPE
    at WriteWrap.onWriteComplete [as oncomplete] (node:internal/stream_base_commons:94:16) {
  errno: -32,
  code: 'EPIPE',
  syscall: 'write'
}
 ›   Warning: Could not find ts-node at 
 ›   /Users/hugh/Documents/GitHub/hydrogen-quickstart/node_modules/@shopify/cli/dist/index-e6f8190d.js. Please ensure that 
 ›   ts-node is a devDependency. Falling back to compiled source.

[hsdonkin]

I've tried installing ts-node as a dev dependency, but no luck.

[graygilmore]

I think the ts-node warning is unrelated.

What operating system are you using? What version of Node?

[hsdonkin]

We've tried this in a couple of environments, MacOS Big Sur but also Sonoma, node v21.7.3 v18.17.1 and v19.0.0.

Also tried a couple of other things:

• downgrading @shopify/cli and @shopify/hydrogen-cli to a previous version
• running with --legacy-runtime to use Node.js instead of an oxygen worker

Interestingly, if we remove oxygen() from vite.config.js, we can navigate to localhost, but get this error:

Named export 'renderToReadableStream' not found. The requested module 'react-dom/server' is a CommonJS module, which may not support all module.exports as named exports.

Which is mentioned in facebook/react#26906

[frandiox]

Named export 'renderToReadableStream' not found. The requested module 'react-dom/server' is a CommonJS module, which may not support all module.exports as named exports.

This error is unrelated to the main issue. This is because if you remove oxygen() you're not adding the Vite config (resolve.condition: ['worker']) necessary to enable renderToReadableStream in your app's entry.server.jsx and you'd need to use renderToPipeableStream instead. Doing this means you are running on Node.js in development instead of Oxygen.

Also, as Gray mentioned, the ts-node warning is unrelated and should be fixed in a new upcoming release.

---

The problem we should focus on is what's causing the Unhandled Rejection: Error: write EPIPE. I'm unable to reproduce this, it might be related to the OS version because the Oxygen/worker is a binary that depends on the platform.

Is this breaking the development process? Or can you still see your website and develop your app?
Can you try without --codegen to ensure it's not related to codegen dependencies?

[hsdonkin]

Gotcha, specifically we've tried this on two machines, MacOS Big Sur 11.5.1. and MacOS Sonoma 14.4.1, so we're using a pretty recent OS on a completely different machine and getting an identical error. This is on the M1 silicon.

This is breaking the development process, localhost:3000 just returns an internal server error.

Running npx shopify hydrogen dev without --codegen also gives us this error.

More variables to eliminate:

• tried using a development store, instead of mock.shop, pulling envs directly with npx shopify hydrogen env pull

Thoughts? Thanks for getting back to us so quickly!

[frandiox]

I've also tried on Sonoma 14.4.1, Node 21.7.1 and I can't get the error when creating a new project 😢

Can you try with shopify hydrogen dev --verbose and see if you get anything interesting at all that helps you debug it?

[hsdonkin]

Yeah it's a super weird one 😿

So interestingly, the last line before crash, not sure what it's doing with the package.json

2024-05-07T19:24:33.859Z: Reading the content of file at package.json...
Unhandled Rejection:  Error: write EPIPE

Rest of the logs, minus some capnproto output:

Environment variables injected into MiniOxygen:

SESSION_SECRET        from local .env
PUBLIC_STORE_DOMAIN   from local .env

  ➜  Local:   http://localhost:3000/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help


╭─ success ───────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                     │
│  View Hydrogen app: http://localhost:3000/ [1]                                                      │
│                                                                                                     │
│  View GraphiQL API browser:                                                                         │
│  http://localhost:3000/graphiql                                                                     │
│                                                                                                     │
│  View server network requests:                                                                      │
│  http://localhost:3000/subrequest-profiler                                                          │
│                                                                                                     │
╰─────────────────────────────────────────────────────────────────────────────────────────────────────╯
[1] http://localhost:3000/

2024-05-07T19:20:58.598Z: Reading the content of file at package.json...
Unhandled Rejection:  Error: write EPIPE
    at WriteWrap.onWriteComplete [as oncomplete] (node:internal/stream_base_commons:94:16) {
  errno: -32,
  code: 'EPIPE',
  syscall: 'write'
}
 ›   Warning: Could not find ts-node at /Users/hugh/Documents/GitHub/hydrogen-quickstart/node_modules/@shopify/cli/dist/index-e6f8190d.js. Please ensure 
 ›   that ts-node is a devDependency. Falling back to compiled source.
2024-05-07T19:20:58.684Z: Obtaining the dependency manager in directory /Users/hugh/Documents/GitHub/hydrogen-quickstart...
2024-05-07T19:20:58.687Z: 
Running system process:
  · Command: ruby -v
  · Working directory: /Users/hugh/Documents/GitHub/hydrogen-quickstart

2024-05-07T19:20:58.842Z: Request to https://monorail-edge.shopifysvc.com/v1/produce completed in 145 ms
With response headers:
 - x-request-id: 676a9edb-84e5-486e-a4b9-fbd714510a0a
    
2024-05-07T19:20:58.843Z: Analytics event sent: {
  "command": "hydrogen dev",
  "time_start": 1715109657892,
  "time_end": 1715109658682,
  "total_time": 790,
  "success": true,
  "cli_version": "3.59.2",
  "ruby_version": "3.1.3",
  "node_version": "18.17.1",
  "is_employee": false,
  "uname": "darwin arm64",
  "env_ci": false,
  "env_plugin_installed_any_custom": false,
  "env_plugin_installed_shopify": "[\"@shopify/cli\",\"@shopify/cli-hydrogen\",\"@shopify/plugin-cloudflare\"]",
  "env_shell": "zsh",
  "env_device_id": "b64c83062e5166195e52f5a34e634504d8387eb2",
  "env_cloud": "localhost",
  "env_package_manager": "npm",
  "env_is_global": false,
  "cmd_all_timing_network_ms": 0,
  "cmd_all_timing_prompts_ms": 0,
  "cmd_all_launcher": "npm",
  "cmd_all_topic": "hydrogen",
  "cmd_all_plugin": "@shopify/cli-hydrogen",
  "cmd_all_timing_active_ms": 790,
  "cmd_all_exit": "ok",
  "args": "--codegen --verbose",
  "env_plugin_installed_all": "[\"@shopify/cli\",\"@shopify/cli-hydrogen\",\"@shopify/plugin-cloudflare\"]",
  "metadata": "{\"extraPublic\":{},\"extraSensitive\":{}}"
}

[frandiox]

Nothing in the logs seem to be clearly related... the EPIPE error might happen when there's some failing communication over the internet. The CLI might perform some telemetry but I doubt it would break the whole thing if it fails.

Another thing that performs an internet connection is the version upgrade check. Try running with --disable-version-check to disable it but I'd be surprised if that's the culprit... I'm running out of ideas 🤔

[hsdonkin]

Yeah 🚫 🎲 unfortunately, still the same issue. It's very weird, and doesn't change between different internet connections, so it's maybe not network related.

Another variable would be ruby version, but we're current on that as well. ruby 3.1.3p185 (2022-11-24 revision 1a6b16756e) [arm64-darwin20]

It's unfortunate, because it's a bit of a showstopper for us in terms of hydrogen development

[graygilmore]

I know there was a bug in some cloudflare SDK stuff for Big Sur but if you're saying this is also happening to a machine that's updated to Sonoma then at least we can count that out.

doesn't change between different internet connections

To be extra sure: this is on different machines using completely different networks? Like one person at an office and another person at home? Are the machines preloaded with any antivirus/corporate management software?

[hsdonkin]

These are pretty clean installs, no management software, different networks.

I think this is an issue with how Remix is set up in this repo. I get the same error not using the Shopify CLI at all:

hugh@WLCRs-MacBook-Pro hydrogen-quickstart % npx remix vite:dev
  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
node:internal/process/promises:288
            triggerUncaughtException(err, true /* fromPromise */);
            ^

Error: write EPIPE
    at WriteWrap.onWriteComplete [as oncomplete] (node:internal/stream_base_commons:94:16) {
  errno: -32,
  code: 'EPIPE',
  syscall: 'write'
}

But in the Remix tutorial template, no error:

hugh@WLCRs-MacBook-Pro my-remix-app % npm run dev

> dev
> remix vite:dev

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

[frandiox]

That probably confirms that the error happens somewhere in the oxygen() plugin, which internally starts an instance of workerd.

Perhaps you could try to use a debugger with that, or add console.logs to the files you find in node_modules/@shopify/mini-oxygen/dist/vite and node_modules/@shopify/mini-oxygen/dist/worker to see which part is breaking. Maybe that would give us more ideas :/

It's also weird this is the only report we get. Makes me think it's something really related to the workerd binary downloaded or something like that... can you try creating the project with pnpm as well? Not sure if that would change anything...

---

Edit: I just saw this error in a different situation after pressing ctrl^c to stop the server:

12:38:45 PM [vite] vite.config.ts changed, restarting server...
12:38:45 PM [vite] server restarted.
^CMiniOxygen: Error during evaluation: Error: write EPIPE
    at WriteWrap.onWriteComplete [as oncomplete] (node:internal/stream_base_commons:94:16) {
  errno: -32,
  code: 'EPIPE',
  syscall: 'write'
}
Unhandled Rejection:  Error: write EPIPE
    at WriteWrap.onWriteComplete [as oncomplete] (node:internal/stream_base_commons:94:16) {
  errno: -32,
  code: 'EPIPE',
  syscall: 'write'
}

That MiniOxygen: Error during evaluation prefix means this was thrown when calling fetch(...) from the Vite/Node process to the local Miniflare/workerd process (they communicate via HTTP).

Makes me think that, indeed, for some reason you can't run workerd on your machine. Can you try running raw Miniflare@3 and see if that works? Or you can try with raw MiniOxygen, which is just a wrapper around Miniflare.

[hsdonkin]

I'll try these out and get back to you, thanks for the ideas!

[hsdonkin]

Got things working! I did some logging and found some points of failure after Miniflare was initialized in node_modules/@shopify/mini-oxygen/dist/worker -- the Miniflare hello world examples worked for me, but for some reasons things failed in min-oxygen.

I ended up updating the OS to Sonoma and reinstalled XCode, and after that things were working. So it seems like something in there just doesn't work on an older OS.

Thanks for your help @frandiox !