Possible false positive/negative

[innerdaze]

Given the following code...

// --> I see an error here <--
const MenuItemLinkRoot = styled(MenuItem, {
  name: 'MenuItemLink',
  slot: 'Root',
  overridesResolver: (props, styles) => styles.root,
})<MenuItemLinkProps>``

const useUtilityClasses = (ownerState: Partial<MenuItemLinkProps>) => {
  const slots = {
    root: ['root'],
  }

  return unstable_composeClasses(slots, getMenuItemLinkUtilityClass, ownerState.classes)
}


// --> and here <--
const MenuItemLink = (props: MenuItemLinkProps) => {
  const { className, classes, ...rootProps } = props

  const slotClasses = useUtilityClasses({ classes })

  const routeMatch = useRouteMatch(props.to as string)

  return (
    <MenuItemLinkRoot
      {...rootProps}
      className={classnames(slotClasses.root, className)}
      selected={props.to === routeMatch?.path}
    />
  )
}

const _MenuItemLink = React.memo(MenuItemLink) as typeof MenuItemLink

export default _MenuItemLink

So as marked by the comments above, I see the error Fast refresh only works when a file only exports components. Move your component(s) to a separate file.

As I am only exporting one component from this file, this seem incorrect.

I would guess this is to do with the leading _ on the default export.

If I change the code so that: -

• MenuItemLink becomes _MenuItemLink
• _MenuItemLink becomes MenuItemLink

(so that the exported name starts with a capital, and the non-exported component startds with a _)

then it works without error.

[ArnaudBarre]

Yeah this is an assumption builtin in the React refresh runtime: a function should start with a capital letter to be considered a component: https://github.com/facebook/react/blob/main/packages/react-refresh/src/ReactFreshRuntime.js#L715