Fix HMR for files imported into routes

[frandiox]

Reported here #2019 (comment)

To reproduce the issue:

Create app/test.ts with:

const MyTestFragment = `#graphql
fragment MyTestFragment on Shop {
  id
  name
  description
}
`;

export const MyTestQuery = `#graphql
${MyTestFragment}

query test {
  shop {
    ...MyTestFragment
  }
}
`;

Import it in root.tsx and use it:

function loader ...
  const test = await context.storefront.query(MyTestQuery);

 return defer({ test, ... })

...

 <div>{JSON.stringify(data.test.shop)}</div>

Change the fields in the fragment. The browser won't update automatically without the changes in this PR.

---

The real fix is just this line:

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

Line 108 in f581aa9

...(update.ssrInvalidates ?? []),

[shopify]

Oxygen deployed a preview of your fd-fix-hmr branch. Details:

Storefront	Status	Preview link	Deployment details	Last update (UTC)
skeleton	✅ Successful (Logs)	Preview deployment	Inspect deployment	May 2, 2024 7:20 AM

Learn more about Hydrogen's GitHub integration.

[jamalsoueidan]

Which release is this to use it? 👯

[blittle]

@jamalsoueidan once it's merged to main, it will be available in a next tagged released on NPM. It will ship with our May release, which will be in the next week or two.

[jamalsoueidan]

@jamalsoueidan once it's merged to main, it will be available in a next tagged released on NPM. It will ship with our May release, which will be in the next week or two.

Is it possible to use this locally right now? It's making my head explode....right now the fetcher.data is also cached...

[juanpprieto]

Tested and working!

[jamalsoueidan]

@juanpprieto How can I use this? which release version?

[frandiox]

@jamalsoueidan Try npm i -D @shopify/mini-oxygen@next

[jamalsoueidan]

jamalsoueidan@jamals-macbook-pro booking-store % npm run dev:tunnel

latest-hydrogen@1.0.7 dev:tunnel
shopify hydrogen dev --codegen --customer-account-push__unstable

Port 3000 is in use, trying another one...

Starting tunnel...

╭─ error ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ We couldn't find the cloudflare tunnel plugin │
│ │
│ To investigate the issue, examine this stack trace: │
│ at startTunnelPlugin (@shopify/cli-hydrogen/dist/lib/tunneling.js:12) │
│ throw new BugError(We couldn't find the ${provider} tunnel plugin); │
│ at async startTunnelAndPushConfig (@shopify/cli-hydrogen/dist/lib/dev-shared.js:53) │
│ const tunnel = await startTunnelPlugin(cliConfig, port, "cloudflare"); │
│ at all │
│ at async runViteDev (@shopify/cli-hydrogen/dist/commands/hydrogen/dev-vite.js:173) │
│ const [tunnel, cliCommand] = await Promise.all([ │
│ at run (@shopify/cli-hydrogen/dist/commands/hydrogen/dev.js:70) │
│ const { close } = await hasViteConfig(directory ?? process.cwd()) ? await import('./dev-vite.js').then( │
│ at async runCLI (@shopify/cli-kit/src/public/node/cli.ts:95) │
│ await run(undefined, config) │
│ at async runShopifyCLI (@shopify/cli/src/index.ts:42) │
│ await runCLI({ │
│

[juanpprieto]

Port 3000 is in use, trying another one...

You have another Hydrogen instance or other process running on this port. Try to stop it and it should be ok

[jamalsoueidan]

Port 3000 is in use, trying another one...

You have another Hydrogen instance or other process running on this port. Try to stop it and it should be ok

I will give it a try, maybe the process didn't terminate, thank you @juanpprieto

[jamalsoueidan]

Port 3000 is in use, trying another one...

You have another Hydrogen instance or other process running on this port. Try to stop it and it should be ok

This was not the issue, this started to happen after:
Try npm i -D @shopify/mini-oxygen@next

[frandiox]

@jamalsoueidan This has been released in mini-oxygen@3.0.2.

I'd suggest using h2 upgrade to get proper version of packages because the issue you posted sounds related to a version mismatch with other Shopify CLI things (tunneling, etc).

[michenly]

@jamalsoueidan, mini-oxygen@3.0.2 was released yesterday. Just in case there is a timing confusion on what you tired.

[jamalsoueidan]

I will give it a try @frandiox @michenly