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

[cosmoart]

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

With just React (it works): https://codesandbox.io/p/sandbox/framer-motion-bug-react-c767lp?file=%2Fsrc%2FApp.js With Next.js + React (Not working): https://codesandbox.io/p/devbox/framer-motion-bug-nextjs-lzxrt6?file=%2Fapp%2Fpage.tsx

4. Steps to reproduce

Steps to reproduce the behavior:

1. Create a project with nextjs npx create-next-app@latest
2. Install framer motion and paste the example from the documentation
3. 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

[jai-x]

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

[TheAyes]

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

[mraballard]

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",

[TheAyes]

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]

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

[codeyacine]

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

@TheAyes I just changed the package version to "^10.12.6" and I can confirm that it works properly.

[forward-step]

It works normally when I change the version to 10.12.7

[andreyvital]

@forward-step I can confirm that

[maderesponsively]

It's broken for me and I can confirm @forward-step solution of downgrading works.

[elunomas]

@maderesponsively @forward-step same here, without Next, just React@18.2.0

[jacksmethurst]

Had to downgrade to 10.12.7 for it to work with next

[robertotcestari]

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.

[ARTony8]

Any real solution so far ?

I found out that each time you start to drag an element, the array containing all items is updated (via the callback function passed to onReorder) everytime the dragged element pass over another element. So if i have an array [1, 2, 3, 4] and i want to drag "1" to the end, the array will be updated 4 times : [2,1,3,4] then [2,3,1,4] then [2,3,4,1].

The problem i think is that sometimes, that update occur too early and too many times unecessarly. The animation sometimes is not completed and the drag is not completed yet (mouse still down). Sometimes, the array is already updated and the animation is not completed yet causing the element to be not draggable anymore or causing random behaviour.

I don't know, it's my own analyze. But i think it would be great if the array is update only and only when the drag action is complete (when the mouse is finally up) and the animation is done.

[b8zeek]

Confirming the issue on React 18.2.0, Vite 4.4.5 with Framer Motion 10.16.4...

[nodegin]

Got same buggy behavior with reordering, works fine on 10.12.7

[b8zeek]

Yeah, version 10.12.7 works for me, too.

[tkoehlerlg]

Same here, but how can such a problem persist through so many versions ...

[TheJoeCollins]

Ran into this as well but was seems I found a way to get the intended result. Wrapping in a transition fixed it for me.

  const [_, startTransition] = useTransition();
  const [items, setItems] = useState([1,2,3,4);

  function onReorder(array: any[]): void {
    startTransition(() => {
      setItems(array);
    });
  }

[opiredev]

@nabby27 created a $30.00 reward using Opire

How to earn this reward?

Since this project does not have Opire bot installed yet 😞 you need to go to [Opire](https://app.opire.dev) and claim the rewards through your programmer's dashboard once you have your PR ready 💪