`@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
}