"Export is incompatible", but WHY?

[jsimmonstx]

Writing a React 19 app, Vite v6.2.0

filename is shims.tsx, and es-lint is reporting that it can't fast refresh the file because an exported function is incompatible, but I can't determine WHY it might be "incompatible". It looks like it follows the rules to me. The following is an abbreviated version of the function in question. It returns a JSX.Element, and I've tried returning "ReactNode", as well as not specifying a return type at all. WHY is it incompatible?

export const makeFormTextareaComponent = (props: IINPUT_TEXTAREA_PROPS): JSX.Element => {
	const makeInput = (): ReactNode => {
		return (
			<div>
				<COMMON_TEXTAREA {...props} />
			</div>
		);
	};
	const renderNoLabel = (): ReactNode => {
		return <div>{makeInput()}</div>;
	};

	return (
		<Fragment>
			{props.labelOrientation === ELABEL_ORIENTATION.NONE && renderNoLabel()}
			// shortened for brevity
			{props.labelOrientation ===... && func()}
			{props.labelOrientation ===... && func2()}
		</Fragment>
	);
};

[ArnaudBarre]

I dumped you code inside a template, it seems fine: https://stackblitz.com/edit/vitejs-vite-dufbhxgt?file=src%2Ftest.tsx

Because the function start with a lowercase, it's not treated as a component, so the update goes up to App.tsx

Given the current code, it seems like it's a Component, and should be called FormTextarea not makeFormTextareaComponent, but either way, the current code is valid.

If the file contains other exports, then you need to have all exports be React component (starts with maj) or no components at all

[jsimmonstx]

Ahh. Well that seems arbitrary to me because I'm specifically naming the return type (and it clearly indicates it returns a component), but okay.

[ArnaudBarre]

That's a convention from React: https://react.dev/learn/your-first-component#step-2-define-the-function
This is important so you can differenciate builtin html tags from React components when composing UI