bump remix and vite #2784

wizardlyhel · 2025-02-27T22:33:31Z

WHY are these changes introduced?

Bumps Remix to 2.16.1-pre.2
Bumps vite from 5 to 6
Bump @vitejs/plugin-react for vite compatibility
Bump @vanilla-extract/vite-plugin for vite compatibility

WHAT is this pull request doing?

HOW to test your changes?

Post-merge steps

Checklist

I've read the Contributing Guidelines
I've considered possible cross-platform impacts (Mac, Linux, Windows)
I've added a changeset if this PR contains user-facing or noteworthy changes
I've added tests to cover my changes
I've added or updated the documentation

shopify · 2025-03-12T21:26:30Z

Oxygen deployed a preview of your hl-bump-remix-vite branch. Details:

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

Learn more about Hydrogen's GitHub integration.

blittle

Great work! A few questions:

What are the implications for people making this change? Is upgrading just bumping the versions in package.json? Or are there other things that they must do?
Will the CLI still work with older versions of Vite? Or does upgrading Hydrogen to this release mean that they must also upgrade Vite?

packages/cli/src/lib/remix-config.ts

wizardlyhel · 2025-03-14T21:41:17Z

What are the implications for people making this change? Is upgrading just bumping the versions in package.json? Or are there other things that they must do?

No project code needs to be updated aside from the version bump

Will the CLI still work with older versions of Vite? Or does upgrading Hydrogen to this release mean that they must also upgrade Vite?

That's a good question .. for sure the importVite will break but that should be an easy fix since we have vite's package json. But for the miniOxygen update .. I'll have to test to find out

wizardlyhel · 2025-03-14T22:09:16Z

Yea @blittle This is a breaking change. We will have to update minimum dependency on Remix, vite, and cli. Otherwise, it will break when people tries to run vite 5 project on latest cli.

wizardlyhel · 2025-03-14T22:24:09Z

Oh wait! I correct myself. If projects on vite 5 somehow updates cli, as long as we fix the importVite function. It will operate fine. This is because the mini-oxygen changes won't impact until dev bumps their project to the latest with the vite 6 changes. So what we need to make sure is the minimum peer dependencies are updated properly between mini-oxygen, and remix. CLI is the only package that needs to be flexible

frandiox

Looks good overall, just added a couple of comments.

I pictured this update as part of moving from Remix to React Router. I guess that's not the case yet? When that time comes, there's some code to remove related to Remix classic bundler in our CLI.

packages/cli/src/lib/vite-config.ts

frandiox · 2025-03-17T02:34:41Z

packages/mini-oxygen/src/vite/worker-entry.ts

-              runtime.moduleCache.invalidateDepTree([
-                // Module IDs are absolute from root
-                update.path.replace(/^\.\//, '/'),
-                ...(update.ssrInvalidates ?? []),
-              ]);
+              runtime.import(update.acceptedPath);


This could lead to tricky bugs in HMR. I would encourage testing HMR in different situations and see if something fails (both server and browser code).
Not saying this change is not correct, but this area was tricky to get right so it would be better to double check (if you haven't yet).

Hmm .. you are right about this. However, HMR still works .. just that it runs multiple times.

If it was an edit from the skeleton template, the hot reload got triggered about 3-4 times.

If it was an edit from the hydrogen-react package, the hot reload got triggered multiple times -- browser page crashes due to not being able to find modules at some point during a HMR update ping and then recovers itself after another reload.

I'm not sure how to get around this since runtime.moduleCache.invalidateDepTree completely disappears from Vite 6 because they said it was redundant.

wizardlyhel · 2025-03-17T16:21:10Z

@frandiox RR7 migration is coming up next. We have to get v3_routeConfig turned on in this PR #2722 and bumping vite so happen to be part of process

wizardlyhel · 2025-03-18T15:40:39Z

/snapit

github-actions · 2025-03-18T15:43:01Z

🫰✨ Thanks @wizardlyhel! 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-20250318154141",
"@shopify/hydrogen": "0.0.0-snapshot-20250318154141",
"@shopify/hydrogen-codegen": "0.0.0-snapshot-20250318154141",
"@shopify/mini-oxygen": "0.0.0-snapshot-20250318154141",
"@shopify/remix-oxygen": "0.0.0-snapshot-20250318154141"

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.

wizardlyhel · 2025-03-18T16:00:02Z

Found a bug parsing css files

wizardlyhel · 2025-03-19T22:48:00Z

/snapit

github-actions · 2025-03-19T22:50:14Z

🫰✨ Thanks @wizardlyhel! 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-20250319224903",
"@shopify/hydrogen": "0.0.0-snapshot-20250319224903",
"@shopify/hydrogen-codegen": "0.0.0-snapshot-20250319224903",
"@shopify/mini-oxygen": "0.0.0-snapshot-20250319224903",
"@shopify/remix-oxygen": "0.0.0-snapshot-20250319224903"

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.

wizardlyhel · 2025-03-19T22:59:38Z

@frandiox I fixed the CSS parsing issue. It turns out we didn't need any of the HMR hooks anymore in vite 6. Remove the HMR hooks in the mini-oxygen vite plugin, the css parsing error also goes away.

wizardlyhel · 2025-03-20T15:55:04Z

/snapit

github-actions · 2025-03-20T15:57:19Z

🫰✨ Thanks @wizardlyhel! 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-20250320155609",
"@shopify/hydrogen": "0.0.0-snapshot-20250320155609",
"@shopify/hydrogen-codegen": "0.0.0-snapshot-20250320155609",
"@shopify/mini-oxygen": "0.0.0-snapshot-20250320155609",
"@shopify/remix-oxygen": "0.0.0-snapshot-20250320155609"

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.

wizardlyhel · 2025-03-20T17:21:57Z

/snapit

github-actions · 2025-03-20T17:24:07Z

🫰✨ Thanks @wizardlyhel! 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-20250320172256",
"@shopify/hydrogen": "0.0.0-snapshot-20250320172256",
"@shopify/hydrogen-codegen": "0.0.0-snapshot-20250320172256",
"@shopify/mini-oxygen": "0.0.0-snapshot-20250320172256",
"@shopify/remix-oxygen": "0.0.0-snapshot-20250320172256"

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.

bump remix and vite

ec26b05

This comment has been minimized.

Sign in to view

wizardlyhel added 2 commits March 10, 2025 11:25

vite update

7f2e39d

something changed

11330f1

wizardlyhel added 9 commits March 12, 2025 14:38

make sure vite is on 6.2.1

d26be41

Only use vite 6

80094f9

fix import utils

b0920b3

logging

6d82663

fix invoke payload

0fddf64

Update Remix to 2.16.1-pre.2

e633ad6

Fix examples

234f5f9

format

976507e

changeset

c056c80

blittle reviewed Mar 14, 2025

View reviewed changes

seanparsons reviewed Mar 14, 2025

View reviewed changes

packages/cli/src/lib/remix-config.ts Outdated Show resolved Hide resolved

seanparsons approved these changes Mar 14, 2025

View reviewed changes

fix version check

b7cd95f

wizardlyhel added 5 commits March 14, 2025 15:25

Fix cli to handle vite 5 dev

b30ae9e

remove vite-5 folder

5279b46

update dependencies

9829fa0

Fix import util again

146072d

console log and fix default port

18b41f5

frandiox approved these changes Mar 17, 2025

View reviewed changes

wizardlyhel added 2 commits March 17, 2025 14:46

Fix type

20512d1

Bump to 2.16.1 remix

cfcc084

wizardlyhel added 4 commits March 17, 2025 15:56

Merge branch 'main' into hl-bump-remix-vite

3c2d934

format and revert some changes from main merge

b10dc53

ignore a type check

93cff46

missed a revert

cc7d32c

wizardlyhel added 2 commits March 19, 2025 15:30

don't need HMR hook

ce7c74f

avoid monorepo HMR message spam

8f274ed

update vailla extract version

c565e40

seanparsons approved these changes Mar 20, 2025

View reviewed changes

wizardlyhel added 2 commits March 20, 2025 09:18

allow worker to handle external module

e856d69

format

9938b6a

wizardlyhel merged commit 0425e50 into main Mar 20, 2025
12 checks passed

wizardlyhel deleted the hl-bump-remix-vite branch March 20, 2025 21:38

shopify-github-actions-access bot mentioned this pull request Mar 20, 2025

[ci] release 2025-01 #2771

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

bump remix and vite #2784

bump remix and vite #2784

wizardlyhel commented Feb 27, 2025 •

edited

Loading

This comment has been minimized.

shopify bot commented Mar 12, 2025 •

edited

Loading

blittle left a comment

wizardlyhel commented Mar 14, 2025

wizardlyhel commented Mar 14, 2025

wizardlyhel commented Mar 14, 2025

frandiox left a comment

frandiox Mar 17, 2025

wizardlyhel Mar 17, 2025 •

edited

Loading

wizardlyhel Mar 17, 2025

wizardlyhel commented Mar 17, 2025 •

edited

Loading

wizardlyhel commented Mar 18, 2025

github-actions bot commented Mar 18, 2025

wizardlyhel commented Mar 18, 2025

wizardlyhel commented Mar 19, 2025

github-actions bot commented Mar 19, 2025

wizardlyhel commented Mar 19, 2025 •

edited

Loading

wizardlyhel commented Mar 20, 2025

github-actions bot commented Mar 20, 2025

wizardlyhel commented Mar 20, 2025

github-actions bot commented Mar 20, 2025

bump remix and vite #2784

bump remix and vite #2784

Conversation

wizardlyhel commented Feb 27, 2025 • edited Loading

WHY are these changes introduced?

WHAT is this pull request doing?

HOW to test your changes?

Post-merge steps

Checklist

This comment has been minimized.

shopify bot commented Mar 12, 2025 • edited Loading

blittle left a comment

Choose a reason for hiding this comment

wizardlyhel commented Mar 14, 2025

wizardlyhel commented Mar 14, 2025

wizardlyhel commented Mar 14, 2025

frandiox left a comment

Choose a reason for hiding this comment

frandiox Mar 17, 2025

Choose a reason for hiding this comment

wizardlyhel Mar 17, 2025 • edited Loading

Choose a reason for hiding this comment

wizardlyhel Mar 17, 2025

Choose a reason for hiding this comment

wizardlyhel commented Mar 17, 2025 • edited Loading

wizardlyhel commented Mar 18, 2025

github-actions bot commented Mar 18, 2025

wizardlyhel commented Mar 18, 2025

wizardlyhel commented Mar 19, 2025

github-actions bot commented Mar 19, 2025

wizardlyhel commented Mar 19, 2025 • edited Loading

wizardlyhel commented Mar 20, 2025

github-actions bot commented Mar 20, 2025

wizardlyhel commented Mar 20, 2025

github-actions bot commented Mar 20, 2025

wizardlyhel commented Feb 27, 2025 •

edited

Loading

shopify bot commented Mar 12, 2025 •

edited

Loading

wizardlyhel Mar 17, 2025 •

edited

Loading

wizardlyhel commented Mar 17, 2025 •

edited

Loading

wizardlyhel commented Mar 19, 2025 •

edited

Loading