· 1 min read

Shiftpack – Automated React Library Migrations

How jscodeshift works: recast parses code into an AST, jscodeshift finds nodes and creates or updates them, recast prints the AST back to source code

Shiftpack is an open-source npm package that helps developers migrate React ecosystem libraries between versions with minimal manual work. It is powered by jscodeshift and comes with pre-built codemods for popular libraries like React Router, Redux, and Material UI.

Why Shiftpack?

Upgrading major versions in React projects often requires large, error-prone manual changes — for example, migrating from React Router v5 → v6, moving from classic Redux → Redux Toolkit, or upgrading Material UI v4 → v5. Shiftpack makes this process easier by:

  • 📦 Providing ready-to-use codemods for popular libraries
  • 🔧 Automatically refactoring your code
  • 📚 Organizing migrations by library and version
  • 🛠 Allowing you to extend with your own custom codemods

Installation

bash
npm install -g shiftpack

Or use npx directly:

bash
npx shiftpack migrate react/v5-to-v6 --path src/

Usage

You can run a single migration or apply an entire migration collection:

bash
shiftpack migrate react/v5-to-v6/useEffectMigration --path src/

This command scans your src/ folder and automatically updates matching code patterns.

Example

What Shiftpack changes when migrating React Router v5 → v6:

Profile.jsx
import { useRouteMatch } from "react-router-dom";
import { useResolvedPath } from "react-router-dom";
 
const Profile = () => {
  const match = useRouteMatch();
  return <Link to={`${match.url}/settings`}>Settings</Link>;
  const match = useResolvedPath("");
  return <Link to={`${match.pathname}/settings`}>Settings</Link>;
};

Roadmap

  • Expand React Router v5 → v6 codemods
  • Redux and Redux Toolkit migrations
  • Material UI v4 → v5 support
  • Future support for Vue ecosystem
  • CLI improvements & interactive mode

In short, Shiftpack is a tool that reduces migration pain, saves developer time, and minimizes errors when upgrading dependencies in React projects.

Noor time