Getting ERR_INVALID_ARG_TYPE error when running yarn dev

[andrisgauracs]

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?

2023.10.3

What version of Remix are you using?

2.1.0

Steps to Reproduce

Error started happening today. Ran yarn dev, visited http://localhost:3000 and the page doesn't load, plus in the console the app is failing with the following error:

╭─ warning ──────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                │
│  [Codegen] (node:27282) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a        │
│  userland alternative instead.                                                                                 │
│                                                                                                                │
│  (Use `node --trace-deprecation ...` to show where the warning was created)                                    │
│                                                                                                                │
╰────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

TypeError [ERR_INVALID_ARG_TYPE]: The "strategy" argument must be of type object. Received type number (0)
    at new ReadableStream (node:internal/webstreams/readablestream:254:5)
    at safeReadableStreamFrom (/Users/andrisgauracs/Node Projects/shopify/my-store/node_modules/miniflare/dist/src/index.js:7564:10)
    at #handleLoopback (/Users/andrisgauracs/Node Projects/shopify/my-store/node_modules/miniflare/dist/src/index.js:7723:36)
    at Server.emit (node:events:531:35)
    at Server.emit (node:domain:488:12)
    at parserOnIncoming (node:_http_server:1137:12)
    at HTTPParser.parserOnHeadersComplete (node:_http_common:119:17)

Expected Behavior

App should be working locally

Actual Behavior

App crashes with the error described above

[Nalundquist]

I had this same problem and upon a small amount of investigation a similar issue was happening with Wrangler (https://github.com/cloudflare/workers-sdk/pull/5201); you can temporarily circumvent this problem by using Node 20.11.1 (current LTS).

[justmars]

Had the same problem running nextjs on pages via wrangler pages dev. Confirming that downgrading node c/o @Nalundquist works.

[Nalundquist]

For now the solutions are (from what I gather):

• use a node version prior to 21.7.x
• manually go into .node_modules\miniflare\dist\src\index.js and delete an extraneous second argument in the return of safeReadableStreamFrom()
• wait until the newest miniflare version that fixes the issue is available on npm and dependencies are updated

[wizardlyhel]

Good to know! We will update our miniflare dependency once it updates

[Nalundquist]

@wizardlyhel the miniflare repo just updated to 3.20240304.1 and the problem is fixed!

[HeisUser]

For now the solutions are (from what I gather):

• use a node version prior to 21.7.x
• manually go into .node_modules\miniflare\dist\src\index.js and delete an extraneous second argument in the return of safeReadableStreamFrom()
• wait until the newest miniflare version that fixes the issue is available on npm and dependencies are updated

@wizardlyhel the miniflare repo just updated to 3.20240304.1 and the problem is fixed!

I have the same issue due to created Hydrogen Storefront of Shopify. Please check the screenshot to advise. I can't resolve this issue with your (all) answers here.

[HeisUser]

Finally I had resolved the error by update all the packages of npm located in node_modules folder by command "npm update"

For now the solutions are (from what I gather):

• use a node version prior to 21.7.x
• manually go into .node_modules\miniflare\dist\src\index.js and delete an extraneous second argument in the return of safeReadableStreamFrom()
• wait until the newest miniflare version that fixes the issue is available on npm and dependencies are updated

@wizardlyhel the miniflare repo just updated to 3.20240304.1 and the problem is fixed!

I have the same issue due to created Hydrogen Storefront of Shopify. Please check the screenshot to advise. I can't resolve this issue with your (all) answers here.

Finally I had resolved the error by update all the packages of npm located in node_modules folder by command "npm update"

But another new error comes again on http://localhost:3000/subrequest-profiler Error Message is "Cannot read properties of null (reading 'useRef')"

[Nalundquist]

@HeisUser the 'strategy' argument not being validated is because in the last build of miniflare there was a function that attempted to make a readableStream object from backend data to serve on a given app:

function safeReadableStreamFrom(iterable: AsyncIterable<Uint8Array>) {
    // Adapted from `undici`, catches errors from `next()` to avoid unhandled
    // rejections from aborted request body streams:
    // https://github.com/nodejs/undici/blob/dfaec78f7a29f07bb043f9006ed0ceb0d5220b55/lib/core/util.js#L369-L392
    let iterator: AsyncIterator<Uint8Array>;
    return new ReadableStream<Uint8Array>(
        {
            async start() {
                iterator = iterable[Symbol.asyncIterator]();
            },
            // @ts-expect-error `pull` may return anything
            async pull(controller): Promise<boolean> {
                try {
                    const { done, value } = await iterator.next();
                    if (done) {
                        queueMicrotask(() => controller.close());
                    } else {
                        const buf = Buffer.isBuffer(value) ? value : Buffer.from(value);
                        controller.enqueue(new Uint8Array(buf));
                    }
                } catch {
                    queueMicrotask(() => controller.close());
                }
                // @ts-expect-error `pull` may return anything
                return controller.desiredSize > 0;
            },
            async cancel() {
                await iterator.return?.();
            },
        },
        0

Cut it off but the key is that zero at the end being a second argument passed into the readableStream constructor. The most recent node update added checks that validate things being cast through readableStream are objects:

class ReadableStream {
  [kType] = 'ReadableStream';

  /**
   * @param {UnderlyingSource} [source]
   * @param {QueuingStrategy} [strategy]
   */
  constructor(source = kEmptyObject, strategy = kEmptyObject) {
    markTransferMode(this, false, true);
    validateObject(source, 'source', kValidateObjectAllowObjects);
    validateObject(strategy, 'strategy', kValidateObjectAllowObjectsAndNull);
    this[kState] = createReadableStreamState();

In this case that zero in particular fails the validateObject check.

Granted I'm honestly rusty as heck and haven't been programming for super duper long but as far as I can see that's why you experienced your first error (tldr: new node update broke some erroneous code in miniflare). If you manually went through and updated a bunch of node dependencies then you updating the miniflare one in particular is what fixed your first problem; I can't say for sure what your second is but its probably some updated package playing poorly with some other updated package as they do.

At the point you're at I would re-scaffold hydrogen from scratch and then update the miniflare package in particular and nothing else.

[frandiox]

This fix was removed from the last release by mistake. It will be included in the next one 🙏

[ramazan-dtas]

Hey I've tried all the solutions above I have node version: v21.7.3 and I keep getting this error

Unhandled Rejection:  TypeError: The "strategy" argument must be of type object. Received type number (0)
    at new ReadableStream (node:internal/webstreams/readablestream:254:5)
    at safeReadableStreamFrom (/Users/ramazandtas12gmail.com/Desktop/fitmedems/Forside til shopify/fitmedems-lager/node_modules/miniflare/src/index.ts:567:9)
    at Server.#handleLoopback (/Users/ramazandtas12gmail.com/Desktop/fitmedems/Forside til shopify/fitmedems-lager/node_modules/miniflare/src/index.ts:793:37)
    at Server.emit (node:events:531:35)
    at Server.emit (node:domain:488:12)
    at parserOnIncoming (node:_http_server:1137:12)
    at HTTPParser.parserOnHeadersComplete (node:_http_common:119:17) {
  code: 'ERR_INVALID_ARG_TYPE'
}

[frandiox]

@ramazan-dtas The fix will be released in the next patch (likely today). If you can't wait, you can try installing @shopify/mini-oxygen@next.

[michenly]

This is fixed with @shopify/mini-oxygen@3.0.1

[HeisUser]

This is fixed with @shopify/mini-oxygen@3.0.1

What is the full command to run '@shopify/mini-oxygen@next'? My OS is MacOS.

[3DJakob]

Upgrading hydrogen fixed it for me. shopify hydrogen upgrade