backpack-v42-migration

Migrates codebases from @skyscanner/backpack-web v41 to v42 with scripted and manual workflows.

543|210|Updated Mar 22, 2017
One-click install
npx skills add https://github.com/Skyscanner/backpack --skill backpack-v42-migration
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: backpack-v42-migration
Source: https://github.com/Skyscanner/backpack/tree/main/.claude/skills/backpack-v42-migration
Command: npx skills add https://github.com/Skyscanner/backpack --skill backpack-v42-migration

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Upgrading @skyscanner/backpack-web from v41 to v42 introduces breaking changes—BpkButtonV2 removal, deep import elimination, and a rewritten BpkAutosuggest API—that require coordinated edits across hundreds of files, which is error-prone when done manually.

Core Features & Use Cases

  • Scripted Button Migration: Renames BpkButtonV2 to BpkButton, fixes deep src/ imports, and converts named imports to default imports using a line-by-line parser that handles multi-line import statements.
  • Guided Autosuggest Migration: Walks through each autosuggest file individually, applying the 12 documented breaking changes (BC-1 through BC-12) covering callback signatures, uncontrolled input patterns, ref forwarding, and race-condition fixes.
  • Test Migration & Verification: Provides jsdom mocking patterns for @floating-ui/react, updated test interaction patterns, and a phased typecheck/test verification workflow.
  • Use Case: A team upgrading a large React monorepo to Backpack v42 uses this skill to discover 260+ affected button files, migrate them via script, then carefully migrate each autosuggest wrapper with per-file review.

Quick Start

Migrate this codebase from @skyscanner/backpack-web v41 to v42, starting with a discovery scan of all affected files.

Frequently Asked Questions about backpack-v42-migration

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate from Backpack v41 to v42?

Run a discovery scan for BpkButtonV2 usage, deep imports, and autosuggest imports, then apply button changes via a migration script and migrate autosuggest files individually. Finish with typecheck and scoped test runs to verify the upgrade.

How to replace BpkButtonV2 with BpkButton in Backpack v42?

Rename BpkButtonV2 to BpkButton globally, convert named imports to default imports, and rewrite any deep src/ import paths to the public package root. A line-by-line parser is recommended over regex because most imports span multiple lines.

What changed in BpkAutosuggest between v41 and v42?

The legacy react-autosuggest implementation was replaced by downshift plus @floating-ui/react, making the input uncontrolled with defaultValue instead of inputProps.value. Callback signatures for onSuggestionsFetchRequested and onSuggestionSelected changed, and containerProps and top-level valid were removed.

Why is my autosuggest input frozen after migrating to Backpack v42?

The input freezes when inputProps.onChange or onBlur still use the v41 two-argument signature, which crashes when V2 calls them with a single React event. Wrap them in adapter functions that translate the event into the expected { newValue } shape.

Why do Backpack v42 autosuggest tests fail in jsdom?

V2 renders suggestions through FloatingPortal and FloatingArrow, which crash in jsdom without mocks. Mock @floating-ui/react exports and use fireEvent.click instead of element.focus() to open the suggestion menu in tests.

Can the Backpack v42 autosuggest migration be fully automated?

No, autosuggest migration cannot be fully automated because the shift from controlled to uncontrolled input changes how parent components manage state. Each wrapper component needs individual analysis, while the button migration is mechanical and scriptable.