javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(react): building app for production now works correctly with vite (#24515)

Browse Source 
resolves #24229
This commit is contained in:
Liam DeBeasi
2022-01-05 14:25:49 -05:00
committed by GitHub
parent 1462cef692
commit 32fad3d02c
6 changed files with 24 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/react/src/components/createInlineOverlayComponent.tsx
View File

@ -1,5 +1,5 @@
import { OverlayEventDetail } from '@ionic/core/components'
import React from 'react';
import React, { createElement } from 'react';
import {
attachProps,
@ -119,8 +119,8 @@ export const createInlineOverlayComponent = <PropType, ElementType>(
* so conditionally render the component
* based on the isOpen state.
*/
return React.createElement(tagName, newProps, (this.state.isOpen) ?
React.createElement('div', {
return createElement(tagName, newProps, (this.state.isOpen) ?
createElement('div', {
id: 'ion-react-wrapper',
ref: this.wrapperRef,
style: {

4
packages/react/src/components/createRoutingComponent.tsx
View File

@ -1,5 +1,5 @@
import { AnimationBuilder } from '@ionic/core/components';
import React from 'react';
import React, { createElement } from 'react';
import { NavContext } from '../contexts/NavContext';
import { RouterOptions } from '../models';
@ -104,7 +104,7 @@ export const createRoutingComponent = <PropType, ElementType>(
newProps.onClick = this.handleClick;
}
return React.createElement(tagName, newProps, children);
return createElement(tagName, newProps, children);
}
static get displayName() {

11
packages/react/src/components/react-component-lib/createComponent.tsx
View File

@ -1,4 +1,4 @@
import React from 'react';
import React, { createElement } from 'react';
import {
attachProps,
@ -80,7 +80,14 @@ export const createReactComponent = <
style,
};
return React.createElement(tagName, newProps, children);
/**
* We use createElement here instead of
* React.createElement to work around a
* bug in Vite (https://github.com/vitejs/vite/issues/6104).
* React.createElement causes all elements to be rendered
* as <tagname> instead of the actual Web Component.
*/
return createElement(tagName, newProps, children);
}
static get displayName() {

4
packages/react/src/hooks/useOverlay.ts
View File

@ -1,5 +1,5 @@
import { OverlayEventDetail } from '@ionic/core/components';
import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
import React, { createElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
import { attachProps } from '../components/react-component-lib/utils';
import { IonContext } from '../contexts/IonContext';
@ -34,7 +34,7 @@ export function useOverlay<OptionsType, OverlayType extends OverlayBase>(
if (React.isValidElement(component)) {
ionContext.addOverlay(overlayId, component, containerElRef.current!);
} else {
const element = React.createElement(component as React.ComponentClass, componentProps);
const element = createElement(component as React.ComponentClass, componentProps);
ionContext.addOverlay(overlayId, element, containerElRef.current!);
}
}