Migrate to React 18

.eslintrc.yml

@@ -1,6 +1,6 @@
 extends:
-  - '@inveniosoftware/invenio'
-  - '@inveniosoftware/invenio/prettier'
+  - "@inveniosoftware/eslint-config-invenio/react18"
+  - "@inveniosoftware/eslint-config-invenio/prettier"
 
 env:
   browser: true

CHANGES.md

@@ -1,6 +1,16 @@
 # Changes
 
-Version 3.2.0 (release 2026-04-13)
+Version 4.0.0 (released TBD)
+
+- BREAKING CHANGE: React 18 migration
+    * Upgrade React peer dependency from ^16.13.0 to ^18.3.x
+    * Upgrade React DOM from ^16.13.0 to ^18.3.x
+    * Replace `enzyme-adapter-react-16` with `@cfaester/enzyme-adapter-react-18`
+    * Migrate demo entry point from `ReactDOM.render()` to `createRoot().render()`
+    * Move Bootstrap side effects from constructor to `componentDidMount` for StrictMode compatibility
+    * Update minimum Node.js engine from >=14.0.0 to >=18.0.0
+
+Version 3.2.0 (released 2026-04-13)
 
 - fix(RangeFacet): use Luxon for date validation
 - feat(RangeFacet): improve custom date filter UX

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-searchkit",
-  "version": "3.2.0",
+  "version": "4.0.0",
   "description": "React components to build your search UI application",
   "main": "dist/cjs/index.js",
   "browser": "dist/cjs/index.js",
@@ -28,8 +28,8 @@
     "luxon": "^1.28.1",
     "lodash": "^4.17.0",
     "qs": "^6.8.0",
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
     "react-overridable": "^1.0.0",
     "react-redux": "^7.2.0",
     "redux": "^4.0.0",
@@ -51,13 +51,13 @@
     "cheerio": "1.0.0-rc.3",
     "coveralls": "^3.0.0",
     "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.15.0",
+    "@cfaester/enzyme-adapter-react-18": "^0.8.0",
     "expect": "^26.5.0",
     "json": "^10.0.0",
     "lodash": "^4.17.0",
     "qs": "^6.8.0",
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
     "react-overridable": "^1.0.0",
     "react-redux": "^7.2.0",
     "react-scripts": "^5.0.0",
@@ -94,9 +94,6 @@
     "search",
     "react search"
   ],
-  "eslintConfig": {
-    "extends": "react-app"
-  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -111,6 +108,6 @@
     ]
   },
   "engines": {
-    "node": ">=14.0.0"
+    "node": ">=18.0.0"
   }
 }

src/demos/App.js

@@ -6,20 +6,27 @@
  * under the terms of the MIT License; see LICENSE file for more details.
  */
 
-import React, { Component } from "react";
-import { Button, Container, Divider, Header, Menu, Segment } from "semantic-ui-react";
+import { Component } from "react";
+import {
+  Button,
+  Container,
+  Divider,
+  Header,
+  Menu,
+  Segment,
+} from "semantic-ui-react";
 import { CERNVideosReactSearchKit } from "./cern-videos";
 import NamespacedExample from "./cern-videos-namespaced/app";
 import { OSReactSearchKit } from "./opensearch";
 import { ZenodoReactSearchKit } from "./zenodo";
 
 const demos = {
-  "os2": {
+  os2: {
     label: "OpenSearch 2",
     text: "You Know, for Search",
     cmp: <OSReactSearchKit />,
   },
-  "zenodo": {
+  zenodo: {
     label: "zenodo.org",
     text: "(All) Research. Shared.",
     cmp: <ZenodoReactSearchKit />,
@@ -29,7 +36,7 @@ const demos = {
     text: "The CERN official platform for videos.",
     cmp: <CERNVideosReactSearchKit />,
   },
-  "namespaced_example": {
+  namespaced_example: {
     label: "video.cern.ch namespaced",
     text: "Example of multiple React-SearchKit instances rendered at same time, namespaced by their appName, with different overridden components.",
     cmp: <NamespacedExample />,
@@ -108,7 +115,8 @@ export default class App extends Component {
         {links}
       </Container>
     );
-    const cmp = activeDemo && activeDemo in demos ? demos[activeDemo].cmp : defaultCmp;
+    const cmp =
+      activeDemo && activeDemo in demos ? demos[activeDemo].cmp : defaultCmp;
 
     return <Container>{cmp}</Container>;
   };

src/demos/cern-videos-namespaced/Results.js

@@ -7,7 +7,7 @@
  */
 
 import PropTypes from "prop-types";
-import React, { Component } from "react";
+import { Component } from "react";
 import { Grid } from "semantic-ui-react";
 import {
   ActiveFilters,
@@ -42,7 +42,10 @@ export class Results extends Component {
           <Grid.Column width={8}>
             <span style={({ marginLeft: "0.5em" }, { marginRight: "0.5em" })}>
               <Count label={(cmp) => <> Found {cmp} results</>} />
-              <Sort values={this.sortValues} label={(cmp) => <> sorted by {cmp}</>} />
+              <Sort
+                values={this.sortValues}
+                label={(cmp) => <> sorted by {cmp}</>}
+              />
             </span>
           </Grid.Column>
           <Grid.Column width={8} textAlign="right">

src/demos/cern-videos-namespaced/app.js

@@ -1,7 +1,6 @@
 /* eslint-disable react/display-name */
 /* eslint-disable react/prop-types */
 import _truncate from "lodash/truncate";
-import React from "react";
 import { OverridableContext } from "react-overridable";
 import { Card, Grid, Image, Item } from "semantic-ui-react";
 import { CERNVideosReactSearchKit2 } from "./cern-videos-2";

src/demos/cern-videos-namespaced/cern-videos-2/App.js

@@ -6,7 +6,6 @@
  * under the terms of the MIT License; see LICENSE file for more details.
  */
 
-import React from "react";
 import { InvenioSearchApi } from "../../../lib/api/contrib/invenio";
 import {
   EmptyResults,
@@ -77,7 +76,10 @@ export const App = () => (
     <ResultsLoader>
       <EmptyResults />
       <Error />
-      <OnResults sortValues={sortValues} resultsPerPageValues={resultsPerPageValues} />
+      <OnResults
+        sortValues={sortValues}
+        resultsPerPageValues={resultsPerPageValues}
+      />
     </ResultsLoader>
   </ReactSearchKit>
 );

src/demos/cern-videos-namespaced/cern-videos-3/App.js

@@ -6,7 +6,6 @@
  * under the terms of the MIT License; see LICENSE file for more details.
  */
 
-import React from "react";
 import { InvenioSearchApi } from "../../../lib/api/contrib/invenio";
 import {
   EmptyResults,
@@ -77,7 +76,10 @@ export const App = () => (
     <ResultsLoader>
       <EmptyResults />
       <Error />
-      <OnResults sortValues={sortValues} resultsPerPageValues={resultsPerPageValues} />
+      <OnResults
+        sortValues={sortValues}
+        resultsPerPageValues={resultsPerPageValues}
+      />
     </ResultsLoader>
   </ReactSearchKit>
 );

src/demos/cern-videos/App.js

@@ -8,9 +8,17 @@
 
 import _truncate from "lodash/truncate";
 import PropTypes from "prop-types";
-import React, { Component } from "react";
+import { Component } from "react";
 import { OverridableContext } from "react-overridable";
-import { Accordion, Card, Container, Grid, Image, Item, Menu } from "semantic-ui-react";
+import {
+  Accordion,
+  Card,
+  Container,
+  Grid,
+  Image,
+  Item,
+  Menu,
+} from "semantic-ui-react";
 import { InvenioSearchApi } from "../../lib/api/contrib/invenio";
 import {
   BucketAggregation,
@@ -74,7 +82,10 @@ const CERNVideosResultsListItem = ({ result, index }) => {
   const metadata = result.metadata;
   return (
     <Item key={index} href={`#${metadata.recid}`}>
-      <Item.Image size="small" src={result.imageSrc || "https://placehold.co/200"} />
+      <Item.Image
+        size="small"
+        src={result.imageSrc || "https://placehold.co/200"}
+      />
       <Item.Content>
         <Item.Header>{metadata.title.title}</Item.Header>
         <Item.Description>

src/demos/cern-videos/Results.js

@@ -7,7 +7,7 @@
  */
 
 import PropTypes from "prop-types";
-import React, { Component } from "react";
+import { Component } from "react";
 import { Grid } from "semantic-ui-react";
 import {
   ActiveFilters,
@@ -42,7 +42,10 @@ export class Results extends Component {
           <Grid.Column width={8}>
             <span style={({ marginLeft: "0.5em" }, { marginRight: "0.5em" })}>
               <Count label={(cmp) => <> Found {cmp} results</>} />
-              <Sort values={this.sortValues} label={(cmp) => <> sorted by {cmp}</>} />
+              <Sort
+                values={this.sortValues}
+                label={(cmp) => <> sorted by {cmp}</>}
+              />
             </span>
           </Grid.Column>
           <Grid.Column width={8} textAlign="right">