[ionic v4 with react] Integrating @ionic/core 4.0 beta defineCustomElements error

[ferparra]

Hi everyone,

I'm having issues integrating Ionic Web Components to a React project.

So far, I have followed these instructions:
https://stenciljs.com/docs/framework-integration/#react

However, I get an error saying that defineCustomElements is not a function?

Error screenshot

Sandbox code

[Hotell]

yup same issue here.

Here is why is this happening:

• if you're using webpack or rollup, they'll consume module package.json field, which points to es2015 module files ( not es5 )

which doesn't export defineCustomElements. This function is exported only from the main bundle, which is wrong.

Quick Fix

hope this is gonna be resolved sooner than later ✌️

[ferparra]

Awesome @Hotell!

I have changed the path to my Ionic JS library import, no errors.

Have you had to add anything else? My components styles are looking all wrong. Perhaps an import statement just for the stylesheet files?

[Hotell]

you need to import ionic.css

but I'll save you the effort, I've tested today ( it took me almost whole day poor me...) ionic v4 components with react, and, well. It doesn't work ( also as ionic core devs stated on twitter "ionic v4 is primarily for Angular, react is not supported, yet" . Don't do the same mistake as I did :)

[ferparra]

Oh, I see... thanks! (I was also driving insane).

Yeah, it's confusing. My understanding is that thanks to Ionic 4 components being developed in Stencil, they should be framework agnostic. Seems like that's not entirely true.

[paulstelzer]

This is issue should be resolved in beta.17. If I am wrong, please write here!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.