bug: v6 beta not working with react and vite

[aaronksaunders]

Prequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

Vite, Rollup, and ESBuild — oh my!
As an added bonus, Framework v6 will be usable with tooling such as Vite, Rollup, and ESBuild, giving you even more options for building apps. This is something that developers have been asking us about for a while, so we are excited to roll this support out.

Tried following the project upgrade directions for using with react. Started a new project using vite. Added IonApp to project and the application crashed.

Code does not run, error message attached below

Expected Behavior

code to run without error

Steps to Reproduce

import React from "react";
import "./App.css";
import { IonApp } from "@ionic/react";

function App() {

  return (
    <IonApp>
      <p>Hello Vite + React!</p>
    </IonApp>
  );
}

export default App;

Code Reproduction URL

No response

Ionic Info

No response

Additional Information

[liamdebeasi]

Thanks for the issue! The new Vite/ESBuild/Rollup support is dependent on the Custom Elements build (mentioned above in the paragraph you quoted from the blog). As of now the Custom Elements build is only in Ionic Vue, so Vite will not work with Ionic React at the moment.

I am going to close this issue since things are working as intended, but we are tracking Custom Elements support internally and will be sure to update the community when support has landed in Ionic React.

[aaronksaunders]

thanks

[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.