motion: [BUG] Reorder doesn't work with Next.js

2. Describe the bug

Reorder.Group and Reorder.Item behave strangely after doing a couple of reorders.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/p/sandbox/blazing-cache-mkfvmp?file=%2Fapp%2Fpage.tsx%3A1%2C13

4. Steps to reproduce

Steps to reproduce the behavior:

Create a project with nextjs npx create-next-app@latest
Install framer motion and paste the example from the documentation
Reorder the numbers and you will see that they stop working after a couple of rearrangements

5. Expected behavior

As in the documentation example

6. Video or screenshots

screen-capture (1).webm

7. Environment details

Framer motion version: 10.12.16 Nextjs version: 13.4.4 React version: 18.2.0

8. Notes

The error does not appear on the mobile devices that I have tested

About this issue

Original URL
State: open
Created a year ago
Reactions: 11
Comments: 19

Commits related to this issue

build: downgrade framer-motion, due to https://github.com/framer/motion/issues/2183#issuecomment-1594238954 — committed to powerfulyang/powerfulyang.com by powerfulyang 10 months ago
rollback to an older version of framer motion The newer version of the library has a bug in Next.js apps that causes reordering to behave incorrectly. Ref: https://github.com/framer/motion/issues/21... — committed to trezy-studios/the-inn-at-nightfall by trezy 9 months ago

Most upvoted comments

Did some version testing: 10.12.16 -> Occurs 10.12.15 -> Occurs 10.12.10 -> Occurs 10.12.9 -> Occurs 10.12.8 -> Occurs 10.12.7 -> Does not occur 10.12.5 -> Does not occur

So that being said rolling back to 10.12.7 fixes that specific issue.

React: 18.2.0 vite: 4.2.0-beta.0

+16

TheAyes on Jun 16, 2023

Same issue here. @TheAyes I changed the version in the codesandbox linked to this issue and the bug persists.
"react": "18.2.0",
"next": "^13.4.0",
"framer-motion": "^10.12.16",

That is because Codesandbox doesn’t resolve to the older file for some reason.

 "packages": {
    "": {
      "name": "workspace",
      "version": "0.1.0",
      "dependencies": {
       ...
        "framer-motion": "^10.12.7",
        ...
      }
    },
...
"node_modules/framer-motion": {
      "version": "10.12.16",
      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.12.16.tgz",
      ...

The Comment I wrote first was testing in my local ide in an environment with just react and framer. So I could easily reinstall the dependencies how much I want. I don’t see an option in codesandbox to do that.

TheAyes on Jun 17, 2023

Got same buggy behavior with reordering, works fine on 10.12.7

nodegin on Nov 7, 2023

I can reproduce the same error with Vite on versions > 10.12.7. So it is not specific to NextJS.

I am on latest (v10.16.1) and the problem still persists.

robertotcestari on Aug 23, 2023

Actually. I’ve made a little oversight. You’ll need to remove the little ^ in your package.json and then reinstall dependencies.

TheAyes on Jul 12, 2023

Would also like to +1 on this bug.

I also have a small Github repo which reproduces this bug: https://github.com/jai-x/framer-reorder-bug

Node version: 18.6.0 Framer Motion version: 10.12.16

https://github.com/framer/motion/assets/8362491/be0ad8f3-d95d-4512-affb-84ebf364de64

jai-x on Jun 11, 2023