`reorderKeys` has been removed, since it is no longer needed

Error message

`reorderKeys` has been removed, since it is no longer needed for TransitionMotion's new styles array API.

What it means

`reorderKeys` was a helper exported by react-motion in v0.3 that callers needed to reorder interpolated key objects for TransitionMotion. In react-motion v0.4 TransitionMotion switched to a `styles` array API, making reordering unnecessary, so the export was removed. Calling it now triggers this one-time dev-mode console.error stub instead of a real function.

Source

Thrown at src/reorderKeys.js:8

/* @flow */

let hasWarned = false;
export default function reorderKeys() {
  if (process.env.NODE_ENV === 'development') {
    if (!hasWarned) {
      hasWarned = true;
      console.error(
        "`reorderKeys` has been removed, since it is no longer needed for TransitionMotion's new styles array API.",
      );
    }
  }
}

View on GitHub (pinned to 9e3ce95bac)

Solutions

Remove the `reorderKeys` import and all calls to it from your code.
Migrate TransitionMotion usage from the old single-object/defaultStyles API to the new `styles` array API (pass `styles={[{key, data, style}]}`), which eliminates the need for key reordering.
Update any deep imports like `react-motion/lib/reorderKeys` and consult the react-motion 0.4 migration guide / changelog.
If the warning comes from a dependency, upgrade that dependency to a version compatible with react-motion >=0.4.

Example fix

// before (react-motion <=0.3)
import reorderKeys from 'react-motion/lib/reorderKeys';
const ordered = reorderKeys(interpolated, keys);

// after (react-motion >=0.4 styles array API)
<TransitionMotion styles={configs.map(c => ({ key: c.key, data: c.data, style: c.style }))}>
  {interpolatedStyles => ...}
</TransitionMotion>

Defensive patterns

Strategy: validation

Validate before calling

import reorderKeys from 'react-motion/lib/reorderKeys';
if (typeof reorderKeys === 'function') {
  console.warn('react-motion: reorderKeys exists but is deprecated; migrate to the styles array API.');
}

Type guard

function isReorderKeysRemoved(fn) {
  return typeof fn === 'undefined' || fn.toString().includes('has been removed');
}

Try / catch

// The stub only logs via console.error; it does not throw, so wrap the call and silence the log once.
try {
  reorderKeys();
} catch (e) {
  console.warn('reorderKeys is unavailable:', e.message);
}

Prevention

Do not deep-import internal files (react-motion/lib/*); import only from the package root.
Read the react-motion changelog when upgrading major/minor versions.
Replace reorderKeys usage with the TransitionMotion styles array API during migration.
Pin your react-motion version and update dependencies deliberately, grepping for removed exports before upgrading.
Grep your codebase for 'reorderKeys' as part of the upgrade checklist.

When it happens

Trigger: Calling the `reorderKeys` function imported from react-motion (e.g. `import reorderKeys from 'react-motion/lib/reorderKeys'`) in development mode. The console.error fires once per page load (guarded by `hasWarned`) and only when NODE_ENV is 'development'.

Common situations: Upgrading react-motion from <=0.3 to >=0.4 while keeping old code that imported reorderKeys, copying deprecated TransitionMotion examples/tutorials from before the styles-array API change, or deep-importing internal lib files ('react-motion/lib/reorderKeys') that still ship the warning stub.

AI-assisted analysis of chenglou/react-motion@9e3ce95bac (2026-09-01). Data as JSON: /api/errors/6e2147d4fcc208ed. Report an issue: GitHub.