From 112d152dbdf9247596fb4f1af25c7b3c57c4b5e5 Mon Sep 17 00:00:00 2001 From: Ari Summer Date: Sat, 23 Apr 2022 15:56:23 -0600 Subject: [PATCH 1/3] Conditionally require react-dom/client in reactHydrate/reactRender if React version >= 18 --- node_package/src/reactHydrate.ts | 5 +++-- node_package/src/reactRender.ts | 5 +++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/node_package/src/reactHydrate.ts b/node_package/src/reactHydrate.ts index 5b92b9ca2..bc3906fcd 100644 --- a/node_package/src/reactHydrate.ts +++ b/node_package/src/reactHydrate.ts @@ -1,10 +1,11 @@ -import ReactDOM from 'react-dom'; import { ReactElement, Component } from 'react'; import supportsReactCreateRoot from './supportsReactCreateRoot'; +// eslint-disable-next-line import/no-unresolved +const ReactDOM = supportsReactCreateRoot ? require("react-dom/client") : require("react-dom"); + export default function reactHydrate(domNode: Element, reactElement: ReactElement): void | Element | Component { if (supportsReactCreateRoot) { - // @ts-expect-error potentially present if React 18 or greater return ReactDOM.hydrateRoot(domNode, reactElement); } diff --git a/node_package/src/reactRender.ts b/node_package/src/reactRender.ts index 36a57c330..a1396963d 100644 --- a/node_package/src/reactRender.ts +++ b/node_package/src/reactRender.ts @@ -1,10 +1,11 @@ -import ReactDOM from 'react-dom'; import { ReactElement, Component } from 'react'; import supportsReactCreateRoot from './supportsReactCreateRoot'; +// eslint-disable-next-line import/no-unresolved +const ReactDOM = supportsReactCreateRoot ? require("react-dom/client") : require("react-dom"); + export default function reactRender(domNode: Element, reactElement: ReactElement): void | Element | Component { if (supportsReactCreateRoot) { - // @ts-expect-error potentially present if React 18 or greater const root = ReactDOM.createRoot(domNode); root.render(reactElement); return root From 1825db395524786e53010cec0abacfc7fea40c9e Mon Sep 17 00:00:00 2001 From: Ari Summer Date: Mon, 2 May 2022 21:04:57 -0600 Subject: [PATCH 2/3] Store modules in variables to force webpack dynamic require --- .eslintrc | 1 + node_package/src/reactHydrate.ts | 6 ++++-- node_package/src/reactRender.ts | 6 ++++-- 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/.eslintrc b/.eslintrc index 000777317..c72a17076 100644 --- a/.eslintrc +++ b/.eslintrc @@ -32,6 +32,7 @@ overrides: rules: "@typescript-eslint/no-namespace": 0 "@typescript-eslint/no-shadow": ["error"] + "@typescript-eslint/no-var-requires": 0 rules: no-shadow: 0 diff --git a/node_package/src/reactHydrate.ts b/node_package/src/reactHydrate.ts index bc3906fcd..03316d059 100644 --- a/node_package/src/reactHydrate.ts +++ b/node_package/src/reactHydrate.ts @@ -1,8 +1,10 @@ import { ReactElement, Component } from 'react'; import supportsReactCreateRoot from './supportsReactCreateRoot'; -// eslint-disable-next-line import/no-unresolved -const ReactDOM = supportsReactCreateRoot ? require("react-dom/client") : require("react-dom"); +const reactDomClient = "react-dom/client"; +const reactDom = "react-dom"; +// eslint-disable-next-line import/no-dynamic-require +const ReactDOM = require(supportsReactCreateRoot ? reactDomClient : reactDom); export default function reactHydrate(domNode: Element, reactElement: ReactElement): void | Element | Component { if (supportsReactCreateRoot) { diff --git a/node_package/src/reactRender.ts b/node_package/src/reactRender.ts index a1396963d..53424b538 100644 --- a/node_package/src/reactRender.ts +++ b/node_package/src/reactRender.ts @@ -1,8 +1,10 @@ import { ReactElement, Component } from 'react'; import supportsReactCreateRoot from './supportsReactCreateRoot'; -// eslint-disable-next-line import/no-unresolved -const ReactDOM = supportsReactCreateRoot ? require("react-dom/client") : require("react-dom"); +const reactDomClient = "react-dom/client"; +const reactDom = "react-dom"; +// eslint-disable-next-line import/no-dynamic-require +const ReactDOM = require(supportsReactCreateRoot ? reactDomClient : reactDom); export default function reactRender(domNode: Element, reactElement: ReactElement): void | Element | Component { if (supportsReactCreateRoot) { From e68ad9b86c944dd4fcf1edf750f2db82544b14e2 Mon Sep 17 00:00:00 2001 From: Ari Summer Date: Thu, 16 Jun 2022 09:31:28 -0600 Subject: [PATCH 3/3] Switch require to use string interpolation --- node_package/src/reactHydrate.ts | 4 +--- node_package/src/reactRender.ts | 4 +--- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/node_package/src/reactHydrate.ts b/node_package/src/reactHydrate.ts index 03316d059..c12fb504c 100644 --- a/node_package/src/reactHydrate.ts +++ b/node_package/src/reactHydrate.ts @@ -1,10 +1,8 @@ import { ReactElement, Component } from 'react'; import supportsReactCreateRoot from './supportsReactCreateRoot'; -const reactDomClient = "react-dom/client"; -const reactDom = "react-dom"; // eslint-disable-next-line import/no-dynamic-require -const ReactDOM = require(supportsReactCreateRoot ? reactDomClient : reactDom); +const ReactDOM = require(`react-dom${supportsReactCreateRoot ? '/client' : ''}`); export default function reactHydrate(domNode: Element, reactElement: ReactElement): void | Element | Component { if (supportsReactCreateRoot) { diff --git a/node_package/src/reactRender.ts b/node_package/src/reactRender.ts index 53424b538..5d8ebedbb 100644 --- a/node_package/src/reactRender.ts +++ b/node_package/src/reactRender.ts @@ -1,10 +1,8 @@ import { ReactElement, Component } from 'react'; import supportsReactCreateRoot from './supportsReactCreateRoot'; -const reactDomClient = "react-dom/client"; -const reactDom = "react-dom"; // eslint-disable-next-line import/no-dynamic-require -const ReactDOM = require(supportsReactCreateRoot ? reactDomClient : reactDom); +const ReactDOM = require(`react-dom${supportsReactCreateRoot ? '/client' : ''}`); export default function reactRender(domNode: Element, reactElement: ReactElement): void | Element | Component { if (supportsReactCreateRoot) {