#1.16.0 HMR Not Working

1 messages · Page 1 of 1 (latest)

craggy abyss
#

I'm very excited by the new remix dev server. I followed the steps and everything appears to be working,. I see HMR in the console but the state is not preserve on the page. Everything resets...

Also it's like ~2 seconds. Is that normal? Here is what I'm seeing in the console

> HMR
💿 File changed: app/routes/test_.tsx
💿 Rebuilding...
💿 Rebuilt in 2.3s
Waiting for app server (74ea4646)

> remix-serve build/index.js
Remix App Server started at http://localhost:3000 (http://192.168.1.27:3000)
App server took 391ms
> HMR
terse parcel
#

I talked to @wheat kiln today and he said the way this is implemented currently is sub optimal and they will start optimizing it now that the architecture is in place. It should be very fast when it's optimized

wheat kiln
craggy abyss
craggy abyss
#

Here is what's in my console on the browser

💿 File changed: app/routes/health.tsx
health:16 💿 Rebuilding...
health:16 💿 Rebuilt in 2.4s
health:32 [HMR] Component changed [app/routes/health.tsx]
health:53 [HMR] Updated accepted by remix:manifest

Here is what it's the network tab. I see some logs and then a HMR message.

assetsManifest
: 
{version: "0e758db9", entry: {module: "http://localhost:8002/build/entry.client-S6NU45NC.js",…},…}
type
: 
"HMR"
updates
: 
[{id: "app/routes/health.tsx", url: "http://localhost:8002/build/routes/health-364YU4BL.js",…}]
mossy halo
#

Not helpful sorry, but I am also trying to get HMR working in 1.16.0 with Cloudflare Pages. It was working well in 1.15.x but stopped refreshing in 1.16. I do see console messages (File changed:.... Rebuilding... Rebuilt...) but nothing is injected in the network tab. Socket is connected.

I've tried different configurations to try to make it work with wrangler, but I may be missing something :/

wheat kiln
mossy halo
wheat kiln
mossy halo
#

That could be the culprit or a problem. My server.ts does not have broadcastDevReady (I forgot I had a server.ts and therefore did not use it from the release instructions). Now, on CF pages, where do I import it from? If I do it from remix-run/node then I'm pretty sure my server won't work but it does not seem like remix-run/cloudflare-pages exports this function. Also not sure about where to put it. Do you have any example function you can link me to for CF Pages?

#

This is my current server.ts which is pretty basic:

import { createPagesFunctionHandler } from '@remix-run/cloudflare-pages';
import * as build from '@remix-run/dev/server-build';

const handleRequest = createPagesFunctionHandler({
  build,
  mode: process.env.NODE_ENV,
  getLoadContext: (context) => ({
    ...context.env,
    CF: (context.request as any).cf,
  }),
});

export const onRequest: PagesFunction = async (context) => {
  return handleRequest(context);
};
wheat kiln
#

that should have examples. in CF, you might have to call logDevReady instead of broadcastDevReady since CF limits how fetch can be used and broadcastDevReady uses that under the hood.

#

Both broadcastDevReady and logDevReady are exported from your runtime pkg: @remix-run/<runtime> in this case @remix-run/cloudflare

mossy halo
#

Yeah, I just found it in that package a few mins ago. Will try out the example code and report back

#

That was it

#

Works with the logDevReady inside the server.ts file 🙂

#

Sorry for hijacking your thread here @craggy abyss but maybe this helps someone else hitting this issue because they are as blind as me hehe

#

Thanks @wheat kiln! Appreciate the guidance, I will report back either here or on Github if I find any issues with this setup

wheat kiln
#

when we switch unstable_dev to v2_dev, all the templates will be updated to be new dev server compatible, so this should work out of the box once that happens

mossy halo
#

Right, this is an early adopter situation, combined with a dude that cannot read fully the release notes

wheat kiln
# mossy halo Right, this is an early adopter situation, combined with a dude that cannot read...

haha no worries. we didn't really call out CF stuff in the release notes... until now! https://github.com/remix-run/remix/releases/tag/remix%401.16.0 just added some stuff

GitHub
Release v1.16.0 · remix-run/remix

Remix is full speed ahead preparing for our upcoming v2 release! 1.16.0 stabilizes a handful of CSS features, contains a major overhaul to the internals of the new remix dev server. and fixes a bun...

mossy halo
#

Beautiful! That would have helped me to figure it out better I think. IMHO CF seems to be a bit overlooked in past release notes and in general and it's a bit particular about the entire configuration, so I for one would appreciate more focus on CF going forward.

wheat kiln