BUG: Dashboard build fails with framer-motion 12.x GroupPlaybackControls import error

[e-gineer]

Description

Dashboard UI build fails with Attempted import error: 'GroupPlaybackControls' is not exported from 'motion-dom'. This is caused by an incompatibility between framer-motion 12.x and Storybook 8.6.14.

Severity

HIGH - Blocks all dashboard builds

Reproduction

1. Run make all or make dashboard_assets
2. Build fails during yarn build with:

   Failed to compile.
   Attempted import error: 'GroupPlaybackControls' is not exported from 'motion-dom' (imported as 'GroupPlaybackControls').
   

Expected Behavior

Dashboard should build successfully

Current Behavior

Build fails due to breaking changes in motion-dom package (peer dependency of framer-motion 12.x)

Root Cause

• package.json specifies "framer-motion": "12.0.6"
• framer-motion 12.x depends on motion-dom which has breaking API changes
• Storybook 8.6.14 has compatibility issues with the new motion-dom API
• The GroupPlaybackControls export was removed/changed in motion-dom 12.x

Suggested Fix

Add yarn resolution to pin framer-motion to 11.11.17 (last stable version compatible with Storybook 8):

"resolutions": {
  ...
  "framer-motion": "11.11.17"
}

Related Code

• ui/dashboard/package.json - framer-motion dependency and resolutions

[e-gineer]

Clarification: Storybook-Only Issue

After further investigation, this issue only affects Storybook (yarn storybook), not the production dashboard build or tests:

• ❌ Broken: yarn storybook - Storybook dev server fails
• ❌ Broken: yarn build-storybook - Storybook build fails
• ✅ Works: yarn test - Jest tests pass (used by CI)
• ✅ Works: yarn build - Production dashboard build succeeds
• ✅ Works: make all - Full Powerpipe build succeeds

Why This Happens

Storybook 8.6.14 imports GroupPlaybackControls from framer-motion internally (likely for animation controls in the UI). Framer-motion 12.x removed this export, breaking Storybook but not affecting the dashboard itself.

Impact

Severity: MEDIUM (not HIGH) - Only blocks local Storybook usage for component development. Does not affect:

• CI/CD pipelines
• Production builds
• End users
• Dashboard functionality

Solution

The yarn resolution fix is still appropriate as it:

• Enables developers to use Storybook for component development
• Doesn't affect production builds (they don't bundle Storybook)
• Can be removed when Storybook releases a fix for framer-motion 12 compatibility

[github-actions]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 30 days.

[github-actions]

This issue was closed because it has been stalled for 90 days with no activity.