Hydrogen deploy doesn't work

Help
1

I’m trying to deploy a Hydrogen project to Vercel without success.

First error:

When I initialize the project using pnpm create @shopify/hydrogen@latest and try to deploy without any modifications, I encounter this error in the Vercel deployment log:
Error: ENOENT: no such file or directory, stat '/vercel/path0/build'

This is easy to fix. I just added buildDirectory: 'build' to my Remix config inside the vite.config.ts file.

Second error:

Vercel deployment log:
Error: Missing required "@remix-run/node" package. Please add it to your package.json file.

I resolved this by adding the module to my package.json without changing any other files.

Third error:

After applying the two fixes, the deployment succeeded. However, when I tried to access the deployment URL, I received the following error:

This Serverless Function has crashed.

Your connection is working correctly.

Vercel is working correctly.

500: INTERNAL_SERVER_ERROR
Code: FUNCTION_INVOCATION_FAILED
ID: gru1:gru1::<ID>

If you are a visitor, contact the website owner or try again later.
If you are the owner, learn how to fix the error and check the logs.

When I checked the logs, I found this:

TypeError: Cannot read properties of undefined (reading 'unstable_singleFetch')
    at file:///var/task/build/server/nodejs-eyJydW50aW1lIjoibm9kZWpzIn0/server-index.mjs:13:18
    at ModuleJob.run (node:internal/modules/esm/module_job:234:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:473:24)
    at async i (/opt/rust/nodejs.js:8:16747)
Node.js process exited with exit status: 1. The logs above can help with debugging the issue.

After extensive research, I haven’t found a solution to this issue, but I do have some insights:

  1. When I run vercel build, this file server-index.mjs is created in my build folder. However, if I run pnpm run build, this file is not created.

  2. Inside the file, the error refers to the following code (lines 9-13):

installGlobals({
  nativeFetch:
    (parseInt(process.versions.node, 10) >= 20 &&
      process.env.VERCEL_REMIX_NATIVE_FETCH === '1') ||
    build.future.unstable_singleFetch,
});

Here, build.future is undefined, and the code is unable to access build.future.unstable_singleFetch.

When I ran this file locally, I noticed that build.future indeed doesn’t exist, but build.default.future does. In the next line of this file, I found:

const handleRequest = createRemixRequestHandler(
  build.default || build,
  process.env.NODE_ENV
);

Here, we check for build.default first, so perhaps we could modify the block to:

installGlobals({
  nativeFetch:
    (parseInt(process.versions.node, 10) >= 20 &&
      process.env.VERCEL_REMIX_NATIVE_FETCH === '1') ||
    (build.default || build).future.unstable_singleFetch,
});

  1. This code was introduced by this Pull Request.

  2. I attempted to set VERCEL_REMIX_NATIVE_FETCH=1 in my environment variables to bypass build.future.unstable_singleFetch, but this didn’t work either. Instead of an error page, I received a “page isn’t working” error in the browser:

This page isn’t working <URL>.vercel.app is currently unable to handle this request.
HTTP ERROR 500

When I checked the logs, I found:

TypeError: Cannot convert undefined or null to object
    at Function.values (<anonymous>)
    at groupRoutesByParentId (/var/task/node_modules/.pnpm/@remix-run+server-runtime@2.12.0_typescript@5.6.2/node_modules/@remix-run/server-runtime/dist/routes.js:23:10)
    at Object.createRoutes (/var/task/node_modules/.pnpm/@remix-run+server-runtime@2.12.0_typescript@5.6.2/node_modules/@remix-run/server-runtime/dist/routes.js:35:67)
    at derive (/var/task/node_modules/.pnpm/@remix-run+server-runtime@2.12.0_typescript@5.6.2/node_modules/@remix-run/server-runtime/dist/server.js:31:25)
    at requestHandler (/var/task/node_modules/.pnpm/@remix-run+server-runtime@2.12.0_typescript@5.6.2/node_modules/@remix-run/server-runtime/dist/server.js:74:21)
    at Server.default (file:///var/task/build/server/server-index.mjs:83:26)
    at /opt/rust/nodejs.js:8:4283
    at AsyncLocalStorage.run (node:async_hooks:346:14)
    at /opt/rust/nodejs.js:8:4271
    at AsyncLocalStorage.run (node:async_hooks:346:14)

If anyone knows how to resolve this, I’d greatly appreciate the help. Vercel support pointed me to this link: How to Deploy Shopify Hydrogen 2 to Vercel, but the author removes Vite and uses the classic Remix server, which is not ideal because Vite is the supported server now. Additionally, without Vite, fast refresh and HMR don’t work, making the developer experience less enjoyable.

Thanks in advance!

1 Like
3

Hi, @paulo-alphaomegaa! Welcome to the Vercel Community.

Thanks for your patience! We’ve asked internally and will loop back once we hear an answer.

1 Like
4

Hi @pawlean thank you for the response

This is a big blocker for us, we’re starting a new project and I have to choose if I can move with Vercel or use another alternative.

I hope that you can find an answer soon!

Thanks.

1 Like
5

Hi, @pawlean do you have some response for this request? Our project is blocked waiting for this deployment.

I really appreciate any help you can provide.

6

Hi, @pawlean sorry for asking again, but do you have some response for this request? Our project is blocked waiting for this deployment.

I really appreciate any help you can provide.

8

@paulo-alphaomegaa Appreciate your patience with this :pray:

I’ve just pinged the team again and will loop back with any updates.

1 Like
9

@pawlean thank you! eagerly awaiting the answer

1 Like
10

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.