Uncaught TypeError: Comp is not a function when I use twin.macro

[alihesari]

Hello, I want to use twin.macro with solid.js and this is a basic app with solid but, I get just this error: Uncaught TypeError: Comp is not a function! In the screenshot you can see my vote config and the error in chrome.

[atk]

You need to include {Input} as a computed child, not as a <component />, otherwise solid will attempt to call it as a function.

[alihesari]

I tested this way and it does not work.

[ryansolid]

Hmm.. that is supposed to be a styled component I see reading from the docs. How do you set your styled implementation? Solid doesn't use HyperScript so typical styled component solution won't work. It does say it supports different CSS in JS frameworks. It supports Goober so I wonder if something similar might work, but looking at it, it's a bit involved.

Here's the Preact example with Goober. https://github.com/ben-rogerson/twin.examples/tree/master/preact-goober. Looks like it uses a couple babel plugins to get it to play nice. Solid styled components use Goober so I wonder if there is potential there.

In general you can't just swap the pragma because Solid doesn't use pragma. So using Emotions JSX pragma is incompatible. In fact using ESBuild to transform the JSX won't work properly, and Solid's Vite plugin actually ensures all JSX is transformed by our Babel plugin instead.

[alihesari]

I just install twin.macro according to its document and config it with Vite like this example: https://github.com/ben-rogerson/twin.examples/tree/master/vite-emotion-typescript

[ryansolid]

For sure. What I'm trying to say is: https://github.com/ben-rogerson/twin.examples/blob/master/vite-emotion-typescript/vite.config.ts#L7-L10 can't work with Solid's transform. We need to use babel and he have no jsxPragma. We can't replace it with Emotion it just won't work. We need to use our transform not theirs.

[thednp]

@alihesari and everyone else just found out that same error can happen as well with imported SVGs and no 'vite-plugin-solid-svg' is added to vite / vitest config.