javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +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

14
core/package-lock.json generated
View File

@@ -19,7 +19,7 @@
"@rollup/plugin-node-resolve": "^8.4.0",
"@rollup/plugin-virtual": "^2.0.3",
"@stencil/angular-output-target": "^0.4.0",
"@stencil/react-output-target": "^0.2.0",
"@stencil/react-output-target": "^0.2.1",
"@stencil/sass": "1.3.2",
"@stencil/vue-output-target": "^0.6.0",
"@types/jest": "^26.0.20",
@@ -1378,9 +1378,9 @@
}
},
"node_modules/@stencil/react-output-target": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.2.0.tgz",
"integrity": "sha512-xVqDn7XE7os8/Ant30bwHL+PF0+0+GGtHonF9/Acvy2Z58HHk10tGFXwJcMMHxF6zCMWrlHIJ76jqEe2gxZobg==",
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.2.1.tgz",
"integrity": "sha512-A6ut+ua3s9UPVXHmAco8g6phvRsr8Db1wM6Mws2bdSAawzc1n49afS+FbTMUMcjqKAGShMp5lsM0/QA0jx5SdQ==",
"dev": true,
"peerDependencies": {
"@stencil/core": "^2.9.0"
@@ -15060,9 +15060,9 @@
"integrity": "sha512-hQlQKh5CUJe8g3L5avLLsfgVu95HMS2LToTtS7gpvvP0eKes1VvAC56uhI+vH4u44GZl9ck/g1rJBVRmMWu0LA=="
},
"@stencil/react-output-target": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.2.0.tgz",
"integrity": "sha512-xVqDn7XE7os8/Ant30bwHL+PF0+0+GGtHonF9/Acvy2Z58HHk10tGFXwJcMMHxF6zCMWrlHIJ76jqEe2gxZobg==",
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.2.1.tgz",
"integrity": "sha512-A6ut+ua3s9UPVXHmAco8g6phvRsr8Db1wM6Mws2bdSAawzc1n49afS+FbTMUMcjqKAGShMp5lsM0/QA0jx5SdQ==",
"dev": true
},
"@stencil/sass": {

2
core/package.json
View File

@@ -41,7 +41,7 @@
"@rollup/plugin-node-resolve": "^8.4.0",
"@rollup/plugin-virtual": "^2.0.3",
"@stencil/angular-output-target": "^0.4.0",
"@stencil/react-output-target": "^0.2.0",
"@stencil/react-output-target": "^0.2.1",
"@stencil/sass": "1.3.2",
"@stencil/vue-output-target": "^0.6.0",
"@types/jest": "^26.0.20",

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!);
}
}