TypeScript errors with Preact components

[eostrom]

• [x] I have read the troubleshooting section before opening an issue.
• [x] I have tried upgrading iles and vite.

Description 📖

In a new îles app with Preact, I tried creating a component with TypeScript, and got a TypeScript error:

Type 'Element' is not assignable to type 'VNode'.

(See full output below.)

Reproduction 🐞

eostrom/iles-preact-typescript-repro

Dependencies Info

``` ❯ npx iles info iles v0.6.4 vite v2.6.14 ❯ npm list iles-app@0.0.0 /Users/eostrom/workspace/swagleft/iles-preact-typescript-repro ├── @preact/preset-vite@2.1.5 ├── iles@0.6.4 ├── preact-render-to-string@5.1.19 ├── preact@10.5.15 ├── typescript@4.3.5 ├── vite@2.6.14 └── vue-tsc@0.3.0 ```

Logs 📜

Output

`npm run dev` and `build` work, but my IDE shows the errors produced by `yarn tsc --noEmit`: ``` src/components/FrameworkLink.tsx:4:3 - error TS2322: Type 'Element' is not assignable to type 'VNode'. Types of property 'type' are incompatible. Type 'VNodeTypes' is not assignable to type 'string | ComponentType'. Type 'VNode' is not assignable to type 'string | ComponentType'. Type 'VNode' is not assignable to type 'string'. 4 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 5 Preact ~~~~~~~~~~ 6 { props.children } ~~~~~~~~~~~~~~~~~~~~~~ 7 ~~~~~~ node_modules/preact/src/index.d.ts:85:18 85 export interface FunctionComponent

{ ~~~~~~~~~~~~~~~~~ The expected type comes from the return type of this signature. Found 1 error. ```

[eostrom]

The solution for me was to change the jsx property in tsconfig.json and add jsxImportSource:

    "jsx": "react-jsx",
    "jsxImportSource": "preact",

• solution from Preact docs
• PR in my repo

I'm not sure where the initial tsconfig.json file came from or how to make this change for Preact projects only, but if you point me in the right direction I'd be happy to try to provide a PR.

[ElMassimo]

Hi Erik!

Thanks for sharing! I'll add the proper tsconfig.json to the preact template in create-iles.

I'll keep this issue open as a reminder in the meantime.

[ElMassimo]

Fixed in create-iles@0.6.2. Thanks @eostrom!