HMR breaks when exporting nameless default function from a route

[ajayraveendran]

I just noticed that when exporting a nameless function from a route file, HMR requires a manual browser reload to reflect changes, so make sure you use named functions folks.

// app/routes/_index.tsx

// Works
export default function HomePage() {
  const customerIsLoggedIn = useLoaderData<typeof loader>();

  return <h1>This is my HomePage</>
}

//Does not work
export default function () {
  const customerIsLoggedIn = useLoaderData<typeof loader>();

  return <h1>This is my HomePage</>
}

This is introduced when upgrading from 2023.4.5 to 2023.7.x as this also requires a @remix/dev upgrade from 1.17.1 to 1.19.1. I believe in 1.19.1, the remix team might have made changes to the manner future.v2_dev works in their config.

Just more an FYI for anyone else that might be experiencing this.

[juanpprieto]

Thanks for sharing @ajayraveendran. @frandiox might have some additional insights here.

[frandiox]

It's a known issue in React Refresh, which is used by Remix HMR internally: facebook/react#21181

Nothing we can do about it here but thanks for bringing it up for others to see 👍

[ajayraveendran]

That makes sense. Thanks for linking the source here. It's also probably good practice to name functions too. Appreciate the quick response