Switch ReactDOM to ESM import to match ESM exports

narwold · Judahmeek · commit ee8b05025204 · 2023-01-13T10:59:37.000-06:00
We are experiencing a breaking change when using react_ujs@2.6.2 (2.6.1 worked fine) when built into a Vite project. ReactDOM is not defined when attempting to import it in `renderHelpers.js`. Through changing the code in node_modules for react_ujs, we have found that changing ReactDOM to an ESM import resolves the issue. This is because build tools often (I recall having this issue in the past with Webpack) have trouble mixing requires (non-ESM) with ESM exports. This PR resolves this issue by changing to an import.
diff --git a/react_ujs/src/renderHelpers.js b/react_ujs/src/renderHelpers.js
@@ -1,4 +1,4 @@
-const ReactDOM = require("react-dom")
+import ReactDOM from "react-dom"
 
 export function supportsHydration() {
   return typeof ReactDOM.hydrate === "function" || typeof ReactDOM.hydrateRoot === "function"

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-const ReactDOM = require("react-dom")`
	`1`	`+import ReactDOM from "react-dom"`
`2`	`2`
`3`	`3`	`export function supportsHydration() {`
`4`	`4`	`return typeof ReactDOM.hydrate === "function" \|\| typeof ReactDOM.hydrateRoot === "function"`