From 32fad3d02cb6b012a772de03eafe3e3a6b1300e0 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 5 Jan 2022 14:25:49 -0500 Subject: [PATCH] fix(react): building app for production now works correctly with vite (#24515) resolves #24229 --- core/package-lock.json | 14 +++++++------- core/package.json | 2 +- .../components/createInlineOverlayComponent.tsx | 6 +++--- .../src/components/createRoutingComponent.tsx | 4 ++-- .../react-component-lib/createComponent.tsx | 11 +++++++++-- packages/react/src/hooks/useOverlay.ts | 4 ++-- 6 files changed, 24 insertions(+), 17 deletions(-) diff --git a/core/package-lock.json b/core/package-lock.json index 2909cbf23a..8d63e6e367 100644 --- a/core/package-lock.json +++ b/core/package-lock.json @@ -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": { diff --git a/core/package.json b/core/package.json index c741cc22ff..544ee08c79 100644 --- a/core/package.json +++ b/core/package.json @@ -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", diff --git a/packages/react/src/components/createInlineOverlayComponent.tsx b/packages/react/src/components/createInlineOverlayComponent.tsx index 7c89d76d0b..1a7f179761 100644 --- a/packages/react/src/components/createInlineOverlayComponent.tsx +++ b/packages/react/src/components/createInlineOverlayComponent.tsx @@ -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 = ( * 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: { diff --git a/packages/react/src/components/createRoutingComponent.tsx b/packages/react/src/components/createRoutingComponent.tsx index f0341f4f42..468be3a9ed 100644 --- a/packages/react/src/components/createRoutingComponent.tsx +++ b/packages/react/src/components/createRoutingComponent.tsx @@ -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 = ( newProps.onClick = this.handleClick; } - return React.createElement(tagName, newProps, children); + return createElement(tagName, newProps, children); } static get displayName() { diff --git a/packages/react/src/components/react-component-lib/createComponent.tsx b/packages/react/src/components/react-component-lib/createComponent.tsx index d179160f79..a5e3c37092 100644 --- a/packages/react/src/components/react-component-lib/createComponent.tsx +++ b/packages/react/src/components/react-component-lib/createComponent.tsx @@ -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 instead of the actual Web Component. + */ + return createElement(tagName, newProps, children); } static get displayName() { diff --git a/packages/react/src/hooks/useOverlay.ts b/packages/react/src/hooks/useOverlay.ts index cf892b485f..96637b3f3e 100644 --- a/packages/react/src/hooks/useOverlay.ts +++ b/packages/react/src/hooks/useOverlay.ts @@ -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( 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!); } }