Shopify / hydrogen

Hydrogen lets you build faster headless storefronts in less time, on Shopify.
https://hydrogen.shop
MIT License
1.41k stars 267 forks source link

Quickstart dev fails with EPIPE error #2071

Closed hsdonkin closed 5 months ago

hsdonkin commented 5 months ago

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 commented 5 months ago

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

graygilmore commented 5 months ago

I think the ts-node warning is unrelated.

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

hsdonkin commented 5 months ago

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:

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 https://github.com/facebook/react/issues/26906

frandiox commented 5 months ago

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 commented 5 months ago

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:

Thoughts? Thanks for getting back to us so quickly!

frandiox commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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

hsdonkin commented 5 months ago

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 !