search

ionic-team / stencil-ds-plugins-demo

This is a demo project using the stencil-ds-plugins.
MIT License
44 stars 20 forks source link

React component extending Ionic components #15

Open jdnichollsc opened 4 years ago

jdnichollsc commented 4 years ago

Hello folks, I'm creating stencil components extending Ionic components, and I'm getting these errors when I try to build the React Components:

src/components.ts:14:69 - error TS2694: Namespace 'LocalJSX' has no exported member 'IonActionSheet'.

14 export const IonActionSheet = /*@__PURE__*/createReactComponent<JSX.IonActionSheet, HTMLIonActionSheetElement>('ion-action-sheet');
                                                                       ~~~~~~~~~~~~~~

src/components.ts:15:63 - error TS2694: Namespace 'LocalJSX' has no exported member 'IonAlert'.

15 export const IonAlert = /*@__PURE__*/createReactComponent<JSX.IonAlert, HTMLIonAlertElement>('ion-alert');
                                                                 ~~~~~~~~

src/components.ts:16:61 - error TS2694: Namespace 'LocalJSX' has no exported member 'IonApp'.

16 export const IonApp = /*@__PURE__*/createReactComponent<JSX.IonApp, HTMLIonAppElement>('ion-app');
                                                               ~~~~~~

src/components.ts:17:64 - error TS2694: Namespace 'LocalJSX' has no exported member 'IonAvatar'.

17 export const IonAvatar = /*@__PURE__*/createReactComponent<JSX.IonAvatar, HTMLIonAvatarElement>('ion-avatar');
                                                                  ~~~~~~~~~

src/components.ts:18:68 - error TS2694: Namespace 'LocalJSX' has no exported member 'IonBackButton'.

18 export const IonBackButton = /*@__PURE__*/createReactComponent<JSX.IonBackButton, HTMLIonBackButtonElement>('ion-back-button');

Thanks in advance! :)

ps011 commented 4 years ago

This is happening because of dependency mismatch.

"devDependencies": { "@types/jest": "23.3.9", "@types/node": "latest", "@types/react": "16.3.9", "@types/react-dom": "16.0.5", "jest": "^23.0.0", "jest-dom": "^3.0.2", "np": "^3.1.0", "react": "^16.3.1", "react-dom": "^16.3.1", "typescript": "^3.3.4000" }, "resolutions": { "@types/react": "16.3.9" },

use these exact dependencies to compile your project.

jdnichollsc commented 4 years ago

I want to exclude Ionic core components, to avoid exporting these componentes from my package too (using ionic core as a peer dependency) :)

nurseiit commented 3 years ago

Hi @jdnichollsc, were you able to solve this issue?

jdnichollsc commented 3 years ago

@nurseiit nothing, sorry. We need some instructions to do that from docs 🙏