[🐞] qwikify$ works with React @mui/material but not with PrimeReact components

[st-clair-clarke]

Which component is affected?

Qwik Runtime

Describe the bug

qwikify$ works with https://mui.com/material-ui/, BUT NOT WITH https://primereact.org/ components

The following works:

import { qwikify$ } from '@builder.io/qwik-react';
import { Button } from '@mui/material'

export const MUIButton = qwikify$(Button);

The following DOES NOT work:

import { qwikify$ } from '@builder.io/qwik-react';
import { Button } from 'primereact/button'

export const PRButton = qwikify$(Button);  // **ERROR**

It results in the following error:

TS2345: Argument of type 'typeof Button' is not assignable to parameter of type 
'FunctionComponent<{ children?: any; }>'.   
Type 'typeof Button' provides no match for the signature '(props: { children?: any; }, 
context?: any): ReactElement<any, any> | null'.

Reproduction

Follow the steps above

Steps to reproduce

Follow the steps above.

System Info

pnpx envinfo --system --npmPackages 04/30/2023 08:46:09 AM
.../share/pnpm/store/v3/tmp/dlx-19829    | Progress: resolved 1, reused 0, downloaded 0, ad.../share/pnpm/store/v3/tmp/dlx-19829    |   +1 +
.../share/pnpm/store/v3/tmp/dlx-19829    | Progress: resolved 1, reused 0, downloaded 0, added 0

  System:
    OS: Linux 5.10 LMDE 5 (elsie) 5 (elsie)
    CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
    Memory: 17.48 GB / 31.32 GB
    Container: Yes
    Shell: 5.1.4 - /bin/bash
  npmPackages:
    @builder.io/qwik: ~0.100.0 => 0.100.0 
    @builder.io/qwik-city: ~0.100.0 => 0.100.0 
    @builder.io/qwik-react: ^0.5.0 => 0.5.0 
    @emotion/react: ^11.10.0 => 11.10.0 
    @emotion/styled: ^11.10.0 => 11.10.0 
    @mui/material: ^5.12.0 => 5.12.0 
    @mui/x-data-grid: ^6.2.0 => 6.2.0 
    @nx/eslint-plugin: 16.0.1 => 16.0.1 
    @nx/js: 16.0.1 => 16.0.1 
    @nx/linter: 16.0.1 => 16.0.1 
    @nx/vite: 16.0.1 => 16.0.1 
    @nx/workspace: 16.0.1 => 16.0.1 
    @types/react: ^18.0.0 => 18.0.0 
    @types/react-dom: ^18.0.0 => 18.0.0 
    @typescript-eslint/eslint-plugin: ^5.58.0 => 5.58.0 
    @typescript-eslint/parser: ^5.58.0 => 5.58.0 
    @vitest/ui: ^0.25.8 => 0.25.8 
    eslint: ~8.15.0 => 8.15.0 
    eslint-config-prettier: 8.1.0 => 8.1.0 
    eslint-plugin-qwik: ~0.100.0 => 0.100.0 
    jsdom: ~20.0.3 => 20.0.3 
    node-fetch: ~3.3.0 => 3.3.0 
    nx: 16.0.1 => 16.0.1 
    nx-cloud: latest => 16.0.5 
    prettier: ^2.6.2 => 2.6.2 
    primereact: ^9.3.1 => 9.3.1 
    qwik-nx: 0.16.0 => 0.16.0 
    react: ^18.0.0 => 18.0.0 
    react-dom: ^18.0.0 => 18.0.0 
    sass: ~1.56.1 => 1.56.1 
    typescript: ~4.9.5 => 4.9.5 
    undici: ^5.21.0 => 5.21.0 
    vite: ~4.2.1 => 4.2.1 
    vite-plugin-dts: ~1.7.1 => 1.7.1 
    vite-plugin-eslint: ^1.8.1 => 1.8.1 
    vite-tsconfig-paths: ~4.0.7 => 4.0.7 
    vitest: ^0.28.5 => 0.28.5 
.../share/pnpm/store/v3/tmp/dlx-19829    | Progress: resolved 1, reused 1, downloaded 0, added 1, don

Additional Information

No response

[kulturpessimist]

Looks like Primereact is still using "Class Components" and quikify$ wants "function components"...

[st-clair-clarke]

Seems to be the same for many react-based UI components I have being trying. All are giving the same errors.

[kulturpessimist]

Do you have names?