[BUG] with new version 11.0.24

[HenrikBechmann]

1. Read the FAQs 👇

2. Describe the bug

on compile I get

../../../node_modules/framer-motion/dist/index.d.ts(1902,11): error TS2430: Interface 'CSSStyleDeclarationWithTransform' incorrectly extends interface 'Omit<CSSStyleDeclaration, "direction" | "transition">'.
  Types of property 'x' are incompatible.
    Type 'string | number' is not assignable to type 'string'.
      Type 'number' is not assignable to type 'string'.

Give a clear and concise description of what the bug is.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

A CodeSandbox minimal reproduction will allow us to quickly follow the reproduction steps. Without one, this bug report won't be accepted.

4. Steps to reproduce

Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

5. Expected behavior

A clear and concise description of what you expected to happen.

6. Video or screenshots

If applicable, add a video or screenshots to help explain the bug.

7. Environment details

If applicable, let us know which OS, browser, browser version etc you're using.

FAQs

"use client" error

We would accept a PR implementing "use client" (see previous discussion). In the meantime a workaround is:

// motion.js
"use client"
export * from "framer-motion"

// other.js
import { motion } from "./motion"

Framer Motion won't install

Framer Motion 7+ uses React 18 as a minimum. If you can't upgrade React, install the latest version of Framer Motion 6.

height: "auto" is jumping

Animating to/from auto requires measuring the DOM. There's no perfect way to do this and if you have also applied padding to the same element, these measurements might be wrong.

The recommended solution is to move padding to a child element. See this issue for the full discussion.

Preact isn't working

Framer Motion isn't compatible with Preact.

AnimatePresence isn't working

Have all of its immediate children got a unique key prop that remains the same for that component every render?

// Bad: The index could be given to a different component if the order of items changes
<AnimatePresence>
    {items.map((item, index) => (
        <Component key={index} />
    ))}
</AnimatePresence>

// Good: The item ID is unique to each component
<AnimatePresence>
    {items.map((item, index) => (
        <Component key={item.id} />
    ))}
</AnimatePresence>

Is the AnimatePresence correctly outside of the controlling conditional? AnimatePresence must be rendered whenever you expect an exit animation to run - it can't do so if it's unmounted!

// Bad: AnimatePresence is unmounted - exit animations won't run
{
    isVisible && (
        <AnimatePresence>
            <Component />
        </AnimatePresence>
    )
}

// Good: Only the children are unmounted - exit animations will run
<AnimatePresence>{isVisible && <Component />}</AnimatePresence>

[HenrikBechmann]

I reverted to version 10.16.4, but still get the error.

Yet, webpack compiles my code with no errors. (the error is shown with sublime text (build 4169) build)

[CiroLee]

I reverted to version 10.16.4, but still get the error.

Yet, webpack compiles my code with no errors. (the error is shown with sublime text (build 4169) build)

I encountered this problem when building. This bug may be related to typescript. I reverted to version 5.3.3 and the error will not be reported when building

[nonara]

A little more detail — changes were made to TS v5.4 which it sounds like would be the culprit. Quickly skimming the release notes, I see that there were changes in strictness for narrowing and changes to libs.

Release notes are here:

• https://devblogs.microsoft.com/typescript/announcing-typescript-5-4/
• Dom update 2024-01-11 microsoft/TypeScript#57027

What I can ascertain quickly is that CSSStyleDeclaration in lib.dom.d.ts has properties x, y, etc. defined as being string, so attempting to override and broaden those with a union including number are causing it to throw a diagnostic.

Please let us know when it's updated, and thanks for the great work!