Fix npm package worker resolution in Vite v6 / 2025.1.3+ by juanpprieto · Pull Request #2840 · Shopify/hydrogen

juanpprieto · 2025-04-04T16:16:24Z

Context:
https://shopifypartners.slack.com/archives/C02F94JC3QC/p1743413107901139
sanity-io/hydrogen-sanity#116
sanity-io/visual-editing#1085

Vite 6 (2025.1.3+) seems to have a different more strict NPM module resolution logic for worker exports. This PR aims to fix this by adding an additional resolve conditions for workers in the SSR option.

Looking for feedback

For those having this issue with 2025.1.3+

Could you try this draft mini-oxygen version?

`"@shopify/mini-oxygen": "0.0.0-snapshot-20250408225709"`

P.S - when tophating a codebase with hydrogen-sanity you might need to npm i -force because the sanity does not allow snapshot versions of hydrogen.

Important

make sure you comment out @nkgentile previous vite.config solution if you implemented it to make sure the test results are not skewed

ssr: 
  // ...existing SSR configuration
   
  resolve: {
    conditions: ['worker'],
  }
}

🎩 Top** hat instructions:

Clone hydrogen-sanity-example

git clone https://github.com/juanpprieto/hydrogen-sanity-example

Follow README tophat instructions in the repo

shopify · 2025-04-04T16:16:53Z

Oxygen deployed a preview of your juanpprieto/fix-vite-6-ssr-worker-resolution branch. Details:

Storefront	Status	Preview link	Deployment details	Last update (UTC)
custom-cart-method	✅ Successful (Logs)	Preview deployment	Inspect deployment	April 14, 2025 7:46 PM
Skeleton (skeleton.hydrogen.shop)	✅ Successful (Logs)	Preview deployment	Inspect deployment	April 14, 2025 7:46 PM
classic-remix	✅ Successful (Logs)	Preview deployment	Inspect deployment	April 14, 2025 7:46 PM
third-party-queries-caching	✅ Successful (Logs)	Preview deployment	Inspect deployment	April 14, 2025 7:46 PM
metaobjects	✅ Successful (Logs)	Preview deployment	Inspect deployment	April 14, 2025 7:46 PM

Learn more about Hydrogen's GitHub integration.

juanpprieto · 2025-04-04T16:18:27Z

/snapit

juanpprieto · 2025-04-04T16:28:17Z

/snapit

github-actions · 2025-04-04T16:30:36Z

🫰✨ Thanks @juanpprieto! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

"@shopify/cli-hydrogen": "0.0.0-snapshot-20250404162914",
"@shopify/hydrogen": "0.0.0-snapshot-20250404162914",
"@shopify/mini-oxygen": "0.0.0-snapshot-20250404162914"

Create a new project with all the released packages running npm create @shopify/hydrogen@<snapshot_version>
To try a new CLI plugin version, add @shopify/cli-hydrogen as a dependency to your project using the snapshot version.

juanpprieto · 2025-04-08T19:02:09Z

/snapit

github-actions · 2025-04-08T19:04:21Z

🫰✨ Thanks @juanpprieto! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

"@shopify/cli-hydrogen": "0.0.0-snapshot-20250408190305",
"@shopify/hydrogen": "0.0.0-snapshot-20250408190305",
"@shopify/mini-oxygen": "0.0.0-snapshot-20250408190305"

Create a new project with all the released packages running npm create @shopify/hydrogen@<snapshot_version>
To try a new CLI plugin version, add @shopify/cli-hydrogen as a dependency to your project using the snapshot version.

packages/cli/src/commands/hydrogen/dev.test.ts

packages/cli/src/lib/onboarding/local.ts

packages/hydrogen/src/vite/plugin.ts

packages/cli/src/commands/hydrogen/dev.test.ts

juanpprieto · 2025-04-08T21:24:11Z

/snapit

Copilot

Copilot reviewed 5 out of 5 changed files in this pull request and generated no comments.

Comments suppressed due to low confidence (1)

packages/hydrogen/src/vite/plugin.ts:64

The condition 'workerd' may be a typo unless it is intentionally targeting a specific non-standard environment. Please confirm if 'workerd' is required or if it should be removed.

conditions: ['workerd', 'worker'], // Recommended earlier, ideally combined with these settings

github-actions · 2025-04-08T21:26:27Z

🫰✨ Thanks @juanpprieto! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

"@shopify/cli-hydrogen": "0.0.0-snapshot-20250408212515",
"@shopify/hydrogen": "0.0.0-snapshot-20250408212515"

Create a new project with all the released packages running npm create @shopify/hydrogen@<snapshot_version>
To try a new CLI plugin version, add @shopify/cli-hydrogen as a dependency to your project using the snapshot version.

juanpprieto · 2025-04-08T22:55:46Z

/snapit

github-actions · 2025-04-08T22:58:25Z

🫰✨ Thanks @juanpprieto! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

"@shopify/cli-hydrogen": "0.0.0-snapshot-20250408225709",
"@shopify/hydrogen": "0.0.0-snapshot-20250408225709",
"@shopify/mini-oxygen": "0.0.0-snapshot-20250408225709"

Create a new project with all the released packages running npm create @shopify/hydrogen@<snapshot_version>
To try a new CLI plugin version, add @shopify/cli-hydrogen as a dependency to your project using the snapshot version.

juanpprieto · 2025-04-09T15:58:43Z

packages/mini-oxygen/src/vite/plugin.ts

          ssr: {
            noExternal: true,
            target: 'webworker',
+            resolve: {


balazsbajorics · 2025-04-11T11:58:15Z

Seems like this breaks the skeleton store:

│                                                                              │
│  In Hydrogen's `createStorefrontClient`:                                     │
│                                                                              │
│  `storeDomain` is required when creating a new Storefront client in          │
│  production.                                                                 │
│                                                                              │
│  To investigate the issue, examine this stack trace:                         │
│    at createAppLoadContext (app/lib/context.ts:27)                           │
│      const hydrogenContext = createHydrogenContext({                         │
│    at fetch (server.ts:20)                                                   │
│      const appLoadContext = await createAppLoadContext(                      │
│                                                                              │
╰──────────────────────────────────────────────────────────────────────────────╯

Steps to reproduce:
First method:
npx shopify@latest hydrogen init
then change the @shopify/mini-oxygen dependency to 0.0.0-snapshot-20250408225709
and run npm run dev in a store which defaults to mock.shop instead of having a .env file
If I try to open localhost:3000 it throws this error

Second method:
I checked out your branch, ran npx turbo daemon stop; git clean -fdX && npm install && npm run build && npm run dev and then went to /templates/skeleton and npm run dev there throws the same error

juanpprieto · 2025-04-14T19:54:26Z

/snapit

github-actions · 2025-04-14T20:48:16Z

🫰✨ Thanks @juanpprieto! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

"@shopify/cli-hydrogen": "0.0.0-snapshot-20250414204700",
"@shopify/hydrogen": "0.0.0-snapshot-20250414204700",
"@shopify/mini-oxygen": "0.0.0-snapshot-20250414204700"

Create a new project with all the released packages running npm create @shopify/hydrogen@<snapshot_version>
To try a new CLI plugin version, add @shopify/cli-hydrogen as a dependency to your project using the snapshot version.

frandiox

Hey 👋 I mentioned this to Bret already but here are some thoughts:
Vite 6 changed how resolve.conditions work. Here's the migration guide: https://vite.dev/guide/migration.html#default-value-for-resolve-conditions

To keep the same behavior, I think you would need to add resolve.conditions: ['worker', 'workerd', ...defaultClientConditions] and ssr.resolve.conditions: ['worker', 'workerd', ...defaultClientConditions], doing import {defaultClientConditions} from 'vite'.

workerd is likely not required (it was added just in case), but worker should still be added in front of other conditions. This will make sure you end up importing the "worker" entry point for libraries that specify it, like here (otherwise it would likely get browser.import, which is a different entry file).

For the record, Vite versions before 6 were using resolve.conditions also as ssr.resolve.conditions and adding the default values automatically (module, browser, prod/dev, etc.). However, Vite 6 requires you to do all of this manually as mentioned above.

juanpprieto · 2025-04-15T17:00:14Z

Replaced by #2863

Add ssr worker resolve for vite 6

cd151a6

Shopify deleted a comment from github-actions bot Apr 4, 2025

Add changeset

62d8c91

nkgentile mentioned this pull request Apr 4, 2025

Doesn't work with @shopify/hydrogen@2025.1.3 sanity-io/hydrogen-sanity#116

Closed

juanpprieto added 14 commits April 7, 2025 11:55

Add changeset

97d51e6

Improve test

7cbe406

Does this fix tests?

442e5fe

test

be2e765

CI

9799d22

remove

49b72f6

Add resolve condition to hydrogen vite plugin

5d81967

test

baf496a

comment

24f7730

Fix

662dcc0

pass?

5a68f78

Fix dev command test

742fd17

test

e4fa839

Cleanup

0f1c515

juanpprieto marked this pull request as ready for review April 8, 2025 19:03

juanpprieto changed the title ~~Fix ssr worker resolve for vite 6~~ Fix npm package worker resolution in Vite v6 / 2025.1.3+ Apr 8, 2025

juanpprieto added 3 commits April 8, 2025 13:43

Move to mock.shop

9cea1fe

Change ssr resolve fix to hydrogen vite plugin

91d9d70

Increase test timeout

bcc6ef8

juanpprieto commented Apr 8, 2025

View reviewed changes

packages/cli/src/commands/hydrogen/dev.test.ts Show resolved Hide resolved

juanpprieto commented Apr 8, 2025

View reviewed changes

packages/cli/src/lib/onboarding/local.ts Show resolved Hide resolved

juanpprieto commented Apr 8, 2025

View reviewed changes

packages/hydrogen/src/vite/plugin.ts Outdated Show resolved Hide resolved

juanpprieto commented Apr 8, 2025

View reviewed changes

packages/cli/src/commands/hydrogen/dev.test.ts Show resolved Hide resolved

juanpprieto requested review from Copilot and frandiox April 8, 2025 21:24

Copilot AI reviewed Apr 8, 2025

View reviewed changes

Move back to mini-oxygen

d8942d7

juanpprieto commented Apr 9, 2025

View reviewed changes

Update dev test to support v6

009350f

juanpprieto added 2 commits April 14, 2025 12:24

Restore dev status test

3edd21c

Update local test

7409f46

frandiox reviewed Apr 15, 2025

View reviewed changes

juanpprieto mentioned this pull request Apr 15, 2025

Fix vite 6 resolve conditions #2863

Merged

juanpprieto closed this Apr 15, 2025

Conversation

juanpprieto commented Apr 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Looking for feedback

🎩 Top** hat instructions:

Uh oh!

shopify bot commented Apr 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

juanpprieto commented Apr 4, 2025

Uh oh!

juanpprieto commented Apr 4, 2025

Uh oh!

github-actions bot commented Apr 4, 2025

Uh oh!

juanpprieto commented Apr 8, 2025

Uh oh!

github-actions bot commented Apr 8, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

juanpprieto commented Apr 8, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Apr 8, 2025

Uh oh!

juanpprieto commented Apr 8, 2025

Uh oh!

github-actions bot commented Apr 8, 2025

Uh oh!

juanpprieto Apr 9, 2025

Choose a reason for hiding this comment

Uh oh!

balazsbajorics commented Apr 11, 2025

Uh oh!

juanpprieto commented Apr 14, 2025

Uh oh!

github-actions bot commented Apr 14, 2025

Uh oh!

frandiox left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

juanpprieto commented Apr 15, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

juanpprieto commented Apr 4, 2025 •

edited

Loading

shopify bot commented Apr 4, 2025 •

edited

Loading

frandiox left a comment •

edited

Loading