@preact/signals-react-transform ignoring .tsx files

[zthng]

Hello, the babel transform modules seems to evaluate all of my .tsx files as hasJSX: false for some reason.
Is there anywhere I should check with my configuration?

signals:react-transform:skipped SomeComponent (src/modules/myModule/SomeComponent.tsx:2) { hasSignals: false, hasJSX: false } +13ms

Example of SomeComponent.tsx:

export default function SomeComponent() {
	return (
		<div>
			<h1>Some Component</h1>
		</div>
	);
}

To add more information: I'm using babel + webpack to transpile a project with a mixture of JS/JSX/TS/TSX files

Currently using /** @useSignals */ to manually force the transformation, but would be great to better understand what's going on - not sure where to start.

[JoviDeCroock]

Hmm, that's odd, are you using any special babel rules/transforms? https://github.com/preactjs/signals/blob/main/packages/react-transform/src/index.ts#L545-L550 all it looks for is an element/fragment

[rschristian]

As you only mention .tsx, does it work correctly on .js/.jsx?

If so, the problem is likely an ordering problem, and you've told your TS Babel plugin to transpile JSX. You'll need to persist the JSX for this plugin.

[XantreDev]

Can you provide order of babel plugins in your config?

[zthng]

Hey guys, thanks for the response! Darned timezones...

Here's my babel.config.json:

{
	"presets": [
		["@babel/preset-env", { "targets": { "node": "current" } }],
		["@babel/preset-react", { "runtime": "automatic" }],
		"@babel/preset-typescript"
	],
	"plugins": [
		["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true }],
		"@babel/plugin-transform-class-properties",
		"module:@preact/signals-react-transform",
		"babel-plugin-styled-components"
	]
}

@rschristian - you're right, it's working perfectly fine for .js and .jsx files, only .tsx files affected.
Doing this in TSConfig allowed the components to be found:

{
	"compilerOptions": {
		"jsx": "preserve",
		// ...otherCompilerOptions
	},
	// ...otherOptions
}