Fast refresh breaking when child type is defined in same file as parent

[joel-innhome]

Hello,

Sorry this might be less of an issue with the library and more of a React quirk, but just wanted to ask.

Has anyone else had problems with fast refresh (hot reload) breaking (i.e. causing children to disappear) when the child type is defined in the same file as the parent?

For example:

<Foo>
  <Bar>Hello world</Bar>
</Foo>

This works:

import { Bar } from './Bar'

export const Foo = ({ children }) => {
  const bars = getChildrenByType(children, [Bar])
  return (<div>{bars}</div>)
}

This causes "bars" to disappear when the component fast refreshes:

const Bar = ({ children }) => (<div>{children}</div>)

export const Foo = ({ children }) => {
  const bars = getChildrenByType(children, [Bar])
  return (<div>{bars}</div>)
}

Is there any way to avoid this? Presumably React is getting a mismatch between the Bar from the previous render and the new render?

[joel-innhome]

Ah, I should've read the documentation more... I now see your struggles with what appears to be a similar issue - and your suggestion to use __TYPE and customTypeKey. I might play with that, but it'd be good to get to the bottom of the fast refresh issue.

[joel-innhome]

Okay, I think I figured out a fix. You just have to export your in-same-file types, e.g change:

const Bar = ({ children }) => (<div>{children}</div>)

to

export const Bar = ({ children }) => (<div>{children}</div>)

[pvinis]

I'll try this now too.

If you ever figure out why this was behaving that way, please write. I'm very curious!