Skip to content

Commit 6eda44f

Browse files
committed
fix: use latest createRoot API
1 parent acbe858 commit 6eda44f

File tree

6 files changed

+224
-179
lines changed

6 files changed

+224
-179
lines changed

CHANGELOG.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,12 @@
88

99
#### Bug Fixes
1010

11+
## 2.6.3
12+
13+
#### Bug Fixes
14+
15+
- Support React 18 createRoot API #1194
16+
1117
## 2.6.2
1218

1319
#### New Features

lib/assets/javascripts/react_ujs.js

Lines changed: 22 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
(function webpackUniversalModuleDefinition(root, factory) {
22
if(typeof exports === 'object' && typeof module === 'object')
3-
module.exports = factory(require("react-dom"), require("react"), require("react-dom/server"));
3+
module.exports = factory(require("react-dom"), require("react"), require("react-dom/server"), require("react-dom/client"));
44
else if(typeof define === 'function' && define.amd)
5-
define(["react-dom", "react", "react-dom/server"], factory);
5+
define(["react-dom", "react", "react-dom/server", "react-dom/client"], factory);
66
else if(typeof exports === 'object')
7-
exports["ReactRailsUJS"] = factory(require("react-dom"), require("react"), require("react-dom/server"));
7+
exports["ReactRailsUJS"] = factory(require("react-dom"), require("react"), require("react-dom/server"), require("react-dom/client"));
88
else
9-
root["ReactRailsUJS"] = factory(root["ReactDOM"], root["React"], root["ReactDOMServer"]);
10-
})(this, function(__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_5__, __WEBPACK_EXTERNAL_MODULE_6__) {
9+
root["ReactRailsUJS"] = factory(root["ReactDOM"], root["React"], root["ReactDOMServer"], root["ReactDOMClient"]);
10+
})(this, function(__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_5__, __WEBPACK_EXTERNAL_MODULE_6__, __WEBPACK_EXTERNAL_MODULE_14__) {
1111
return /******/ (function(modules) { // webpackBootstrap
1212
/******/ // The module cache
1313
/******/ var installedModules = {};
@@ -210,21 +210,28 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
210210
/* harmony export (immutable) */ __webpack_exports__["reactHydrate"] = reactHydrate;
211211
/* harmony export (immutable) */ __webpack_exports__["createReactRootLike"] = createReactRootLike;
212212
const ReactDOM = __webpack_require__(1)
213+
var ReactDOMClient = ReactDOM
214+
215+
// React 18+.
216+
const supportsReactCreateRoot = ReactDOM.version && parseInt(ReactDOM.version.split('.')[0], 10) >= 18;
217+
if (supportsReactCreateRoot) {
218+
ReactDOMClient = __webpack_require__(14)
219+
}
213220

214221
function supportsHydration() {
215-
return typeof ReactDOM.hydrate === "function" || typeof ReactDOM.hydrateRoot === "function"
222+
return typeof ReactDOM.hydrate === "function" || typeof ReactDOMClient.hydrateRoot === "function"
216223
}
217224

218225
function reactHydrate(node, component) {
219-
if (typeof ReactDOM.hydrateRoot === "function") {
220-
return ReactDOM.hydrateRoot(node, component)
226+
if (typeof ReactDOMClient.hydrateRoot === "function") {
227+
return ReactDOMClient.hydrateRoot(node, component)
221228
} else {
222229
return ReactDOM.hydrate(component, node)
223230
}
224231
}
225232

226233
function createReactRootLike(node) {
227-
return ReactDOM.createRoot ? ReactDOM.createRoot(node) : legacyReactRootLike(node)
234+
return ReactDOMClient.createRoot ? ReactDOMClient.createRoot(node) : legacyReactRootLike(node)
228235
}
229236

230237
function legacyReactRootLike(node) {
@@ -556,6 +563,12 @@ module.exports = function(reqctx) {
556563
}
557564

558565

566+
/***/ }),
567+
/* 14 */
568+
/***/ (function(module, exports) {
569+
570+
module.exports = __WEBPACK_EXTERNAL_MODULE_14__;
571+
559572
/***/ })
560573
/******/ ]);
561574
});

react_ujs/dist/react_ujs.js

Lines changed: 22 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
(function webpackUniversalModuleDefinition(root, factory) {
22
if(typeof exports === 'object' && typeof module === 'object')
3-
module.exports = factory(require("react-dom"), require("react"), require("react-dom/server"));
3+
module.exports = factory(require("react-dom"), require("react"), require("react-dom/server"), require("react-dom/client"));
44
else if(typeof define === 'function' && define.amd)
5-
define(["react-dom", "react", "react-dom/server"], factory);
5+
define(["react-dom", "react", "react-dom/server", "react-dom/client"], factory);
66
else if(typeof exports === 'object')
7-
exports["ReactRailsUJS"] = factory(require("react-dom"), require("react"), require("react-dom/server"));
7+
exports["ReactRailsUJS"] = factory(require("react-dom"), require("react"), require("react-dom/server"), require("react-dom/client"));
88
else
9-
root["ReactRailsUJS"] = factory(root["ReactDOM"], root["React"], root["ReactDOMServer"]);
10-
})(this, function(__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_5__, __WEBPACK_EXTERNAL_MODULE_6__) {
9+
root["ReactRailsUJS"] = factory(root["ReactDOM"], root["React"], root["ReactDOMServer"], root["ReactDOMClient"]);
10+
})(this, function(__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_5__, __WEBPACK_EXTERNAL_MODULE_6__, __WEBPACK_EXTERNAL_MODULE_14__) {
1111
return /******/ (function(modules) { // webpackBootstrap
1212
/******/ // The module cache
1313
/******/ var installedModules = {};
@@ -210,21 +210,28 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
210210
/* harmony export (immutable) */ __webpack_exports__["reactHydrate"] = reactHydrate;
211211
/* harmony export (immutable) */ __webpack_exports__["createReactRootLike"] = createReactRootLike;
212212
const ReactDOM = __webpack_require__(1)
213+
var ReactDOMClient = ReactDOM
214+
215+
// React 18+.
216+
const supportsReactCreateRoot = ReactDOM.version && parseInt(ReactDOM.version.split('.')[0], 10) >= 18;
217+
if (supportsReactCreateRoot) {
218+
ReactDOMClient = __webpack_require__(14)
219+
}
213220

214221
function supportsHydration() {
215-
return typeof ReactDOM.hydrate === "function" || typeof ReactDOM.hydrateRoot === "function"
222+
return typeof ReactDOM.hydrate === "function" || typeof ReactDOMClient.hydrateRoot === "function"
216223
}
217224

218225
function reactHydrate(node, component) {
219-
if (typeof ReactDOM.hydrateRoot === "function") {
220-
return ReactDOM.hydrateRoot(node, component)
226+
if (typeof ReactDOMClient.hydrateRoot === "function") {
227+
return ReactDOMClient.hydrateRoot(node, component)
221228
} else {
222229
return ReactDOM.hydrate(component, node)
223230
}
224231
}
225232

226233
function createReactRootLike(node) {
227-
return ReactDOM.createRoot ? ReactDOM.createRoot(node) : legacyReactRootLike(node)
234+
return ReactDOMClient.createRoot ? ReactDOMClient.createRoot(node) : legacyReactRootLike(node)
228235
}
229236

230237
function legacyReactRootLike(node) {
@@ -556,6 +563,12 @@ module.exports = function(reqctx) {
556563
}
557564

558565

566+
/***/ }),
567+
/* 14 */
568+
/***/ (function(module, exports) {
569+
570+
module.exports = __WEBPACK_EXTERNAL_MODULE_14__;
571+
559572
/***/ })
560573
/******/ ]);
561574
});

react_ujs/src/renderHelpers.js

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,26 @@
11
const ReactDOM = require("react-dom")
2+
var ReactDOMClient = ReactDOM
3+
4+
// React 18+.
5+
const supportsReactCreateRoot = ReactDOM.version && parseInt(ReactDOM.version.split('.')[0], 10) >= 18;
6+
if (supportsReactCreateRoot) {
7+
ReactDOMClient = require("react-dom/client")
8+
}
29

310
export function supportsHydration() {
4-
return typeof ReactDOM.hydrate === "function" || typeof ReactDOM.hydrateRoot === "function"
11+
return typeof ReactDOM.hydrate === "function" || typeof ReactDOMClient.hydrateRoot === "function"
512
}
613

714
export function reactHydrate(node, component) {
8-
if (typeof ReactDOM.hydrateRoot === "function") {
9-
return ReactDOM.hydrateRoot(node, component)
15+
if (typeof ReactDOMClient.hydrateRoot === "function") {
16+
return ReactDOMClient.hydrateRoot(node, component)
1017
} else {
1118
return ReactDOM.hydrate(component, node)
1219
}
1320
}
1421

1522
export function createReactRootLike(node) {
16-
return ReactDOM.createRoot ? ReactDOM.createRoot(node) : legacyReactRootLike(node)
23+
return ReactDOMClient.createRoot ? ReactDOMClient.createRoot(node) : legacyReactRootLike(node)
1724
}
1825

1926
function legacyReactRootLike(node) {

react_ujs/webpack.config.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,12 @@ module.exports = {
2020
commonjs: 'react-dom',
2121
amd: 'react-dom'
2222
},
23+
'react-dom/client': {
24+
root: 'ReactDOMClient',
25+
commonjs2: 'react-dom/client',
26+
commonjs: 'react-dom/client',
27+
amd: 'react-dom/client'
28+
},
2329
'react-dom/server': {
2430
root: 'ReactDOMServer',
2531
commonjs2: 'react-dom/server',

0 commit comments

Comments
 (0)