Skip to content

Migrate codebase to React 18#298

Open
mirekys wants to merge 5 commits into
inveniosoftware:masterfrom
oarepo:mirekys/react-18-migration
Open

Migrate codebase to React 18#298
mirekys wants to merge 5 commits into
inveniosoftware:masterfrom
oarepo:mirekys/react-18-migration

Conversation

@mirekys
Copy link
Copy Markdown

@mirekys mirekys commented Apr 24, 2026

❤️ Thank you for your contribution!

Description

Migrate react-searchkit from React 16 to React 18 following RFC inveniosoftware/rfcs#112.

  • Upgrades peer dependencies
  • Replaces enzyme adapter for React18 suppoort
  • Removes explicit React imports (update-react-imports codemod)
  • Migrates render-only class components to functions (pure-component codemod)
  • Updates demo entry points to createRoot (update-react-imports codemod)
  • Applies formatting for React 18

Prerequisites

To make React 18 linting work, you need to link a local clone of eslint-config-invenio:

gh repo clone inveniosoftware/eslint-config-invenio
gh pr checkout 20
cd eslint-config-invenio
npm link

In this repo:

npm link @inveniosoftware/eslint-config-invenio
  • All demos works as before without changes
  • All tests pass
  • npm audit down to just 2 moderate severity vulnerabilities (due to webpack-dev-server - didn't manage to solve that one)

Requires:

Part of: inveniosoftware/rfcs#112

Checklist

Ticks in all boxes and 🟢 on all GitHub actions status checks are required to merge:

  • I'm aware of the code of conduct.
  • I've created logical separate commits and followed the commit message format.
  • I've added relevant test cases.
  • I've added relevant documentation.
  • I've marked translation strings.
  • I've identified the copyright holder(s) and updated copyright headers for touched files (>15 lines contributions).
  • I've NOT included third-party code (copy/pasted source code or new dependencies).
    • If you have added third-party code (copy/pasted or new dependencies), please reach out to an architect on Discord.

Frontend

  • I've followed the CSS/JS and React guidelines.
  • I've followed the web accessibility guidelines.
  • I've followed the user interface guidelines.

@mirekys mirekys marked this pull request as draft April 24, 2026 17:39
@mirekys mirekys marked this pull request as ready for review April 28, 2026 15:48
@mirekys mirekys added this to v14 Apr 28, 2026
@mirekys mirekys force-pushed the mirekys/react-18-migration branch from 9f8bd52 to d55223b Compare April 29, 2026 13:10
@mirekys mirekys changed the title Migrate to React 18 Migrate codebase to React 18 Apr 30, 2026
@mirekys mirekys marked this pull request as draft April 30, 2026 16:29
* Upgrades react and react-dom from ^16.13.0 to ^18.3.0
* Upgrades eslint-config-invenio to ^2.1.0
* Replaces enzyme-adapter-react-16 with
  @cfaester/enzyme-adapter-react-18 ^0.8.0
* Requires Node version >=22.0.0
@mirekys mirekys force-pushed the mirekys/react-18-migration branch from d55223b to 9d43498 Compare May 5, 2026 09:57
@mirekys mirekys moved this to 🏗 In progress in v14 May 5, 2026
@mirekys mirekys self-assigned this May 5, 2026
@mirekys mirekys marked this pull request as ready for review May 5, 2026 10:23
mirekys added 4 commits May 6, 2026 10:32
* Applies update-react-imports codemod
* Applies pure-component codemod
* Migrates ReactDOM.render to createRoot API
* Removes unused devDependencies
  (cheerio, coveralls, expect)
* Not used or needed with Node 22+ & React v18
* Fixes npm audit warnings
* Replaces enzyme adapter for React 18 compatibility
* Replaces eslint rules to apply React 18 rules
@mirekys mirekys force-pushed the mirekys/react-18-migration branch from ed3fcdb to 58f618e Compare May 6, 2026 08:33
Copy link
Copy Markdown

@OliverGeneser OliverGeneser left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm

Comment thread package.json
Comment on lines +113 to +128
"overrides": {
"react-scripts": {
"svgo": "^3.3.2",
"resolve-url-loader": "^5.0.0",
"css-minimizer-webpack-plugin": "^8.0.0"
},
"underscore": "^1.13.8",
"@tootallnate/once": "^3.0.1",
"sockjs": "^0.3.24",
"uuid": "^14.0.0",
"serialize-javascript": "^7.0.5",
"workbox-build": "^7.3.0",
"@svgr/webpack": "^6.5.1",
"enzyme": {
"cheerio": "1.0.0-rc.12"
}
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is these overrides needed? Because it's not done in inveniosoftware/react-invenio-forms#334 ?

Copy link
Copy Markdown
Contributor

@ntarocco ntarocco left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! I have added a small comment.

Comment thread package.json
"qs": "^6.8.0",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react": "^18.3.0",
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is the min version v18 required now? Can we keep v16 instead?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: 🏗 In progress

Development

Successfully merging this pull request may close these issues.

3 participants