React SortableJS Sortable is not defined Issue

Unanswered

Basset Fauve de Bretagne posted this in #help-forum

Basset Fauve de BretagneOP

2024-01-15T15:06:10.000Z

anyone here used react-sortablejs?

import React, { useState } from "react";
import { ReactSortable, Sortable } from "react-sortablejs";
import { MultiDrag } from "sortablejs";

// mount whatever plugins you'd like to. These are the only current options.
Sortable.mount(new MultiDrag(), new Swap());

export default function Test() {
  const [state, setState] = useState([
    { id: 1, name: "shrek" },
    { id: 2, name: "fiona" },
    { id: 3, name: "donkey" },

    { id: 4, name: "pussy" },
    { id: 5, name: "knight" },
  ]);

  return (
    <div>
      <ReactSortable multiDrag selectedClass="selected" setList={setState} list={state}>
        {state.map((item) => (
          <div key={item.id}>{item.name}</div>
        ))}
      </ReactSortable>
    </div>
  );
}

I'm trying to have a dnd with multidrag feature, but adding the plugins via this line
Sortable.mount(new MultiDrag(), new Swap());
seems to cause this error. Anyone know how to fix this?

29 Replies

@Basset Fauve de Bretagne anyone here used react-sortablejs? jsx import React, { useState } from "react"; import { ReactSortable, Sortable } from "react-sortablejs"; import { MultiDrag } from "sortablejs"; // mount whatever plugins you'd like to. These are the only current options. Sortable.mount(new MultiDrag(), new Swap()); export default function Test() { const [state, setState] = useState([ { id: 1, name: "shrek" }, { id: 2, name: "fiona" }, { id: 3, name: "donkey" }, { id: 4, name: "pussy" }, { id: 5, name: "knight" }, ]); return ( <div> <ReactSortable multiDrag selectedClass="selected" setList={setState} list={state}> {state.map((item) => ( <div key={item.id}>{item.name}</div> ))} </ReactSortable> </div> ); } I'm trying to have a dnd with multidrag feature, but adding the plugins via this line `Sortable.mount(new MultiDrag(), new Swap());` seems to cause this error. Anyone know how to fix this?

Ray

2024-01-15T15:07:30.000Z

is it a client component?

Basset Fauve de BretagneOP

2024-01-15T15:07:32.000Z

this is my package.json

  "dependencies": {
    "@types/node": "18.14.5",
    "@types/react": "18.0.28",
    "@types/react-dom": "18.0.11",,
    "next": "13.2.3",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-sortablejs": "^6.1.4",
    "sortablejs": "^1.15.2",
    "typescript": "4.9.5",
  },

@Ray is it a client component?

Basset Fauve de BretagneOP

2024-01-15T15:07:42.000Z

this is on pages dir, so yes

https://github.com/SortableJS/Sortable/issues/1229

This is a similar issue, but they're not using next/react. I just don't know how to translate their issue into react/next

Ray

2024-01-15T15:26:12.000Z

create _app.tsx and mount the plugin there

// pages/_app.tsx
import type { AppProps } from "next/app";
import { useEffect } from "react";
import Sortable, { MultiDrag, Swap } from "sortablejs";

export default function MyApp({ Component, pageProps }: AppProps) {
  useEffect(() => {
    Sortable.mount(new MultiDrag(), new Swap());
  }, []);
  return <Component {...pageProps} />;
}

Ray

2024-01-15T15:26:51.000Z

// pages/test.tsx
import React, { useState } from "react";
import { ReactSortable } from "react-sortablejs";

export default function Test() {
  const [state, setState] = useState([
    { id: 1, name: "shrek" },
    { id: 2, name: "fiona" },
    { id: 3, name: "donkey" },

    { id: 4, name: "pussy" },
    { id: 5, name: "knight" },
  ]);

  return (
    <div>
      <ReactSortable multiDrag selectedClass="selected" setList={setState} list={state}>
        {state.map((item) => (
          <div key={item.id}>{item.name}</div>
        ))}
      </ReactSortable>
    </div>
  );
}

@Ray tsx // pages/test.tsx import React, { useState } from "react"; import { ReactSortable } from "react-sortablejs"; export default function Test() { const [state, setState] = useState([ { id: 1, name: "shrek" }, { id: 2, name: "fiona" }, { id: 3, name: "donkey" }, { id: 4, name: "pussy" }, { id: 5, name: "knight" }, ]); return ( <div> <ReactSortable multiDrag selectedClass="selected" setList={setState} list={state}> {state.map((item) => ( <div key={item.id}>{item.name}</div> ))} </ReactSortable> </div> ); }

Basset Fauve de BretagneOP

2024-01-15T15:32:14.000Z

I tried this, but it's giving me this error

Ray

2024-01-15T15:33:03.000Z

did you remove Sortable.mount(new MultiDrag(), new Swap()); on the page?

Basset Fauve de BretagneOP

2024-01-15T15:33:28.000Z

no, I didn't.

Ray

2024-01-15T15:33:36.000Z

remove it from the page

only mount on _app.tsx

Basset Fauve de BretagneOP

2024-01-15T15:34:48.000Z

this is weird. I'm still getting it

react-dom.development.js:22839 Uncaught Sortable: Cannot mount plugin multiDrag more than once

Ray

2024-01-15T15:35:43.000Z

do you have other page mounting it?

Basset Fauve de BretagneOP

2024-01-15T15:36:47.000Z

nah dude, this is the only page mounting it

Ray

2024-01-15T15:37:16.000Z

restart the dev server

@Basset Fauve de Bretagne I tried this, but it's giving me this error

Ray

2024-01-15T15:37:44.000Z

could you show the code on _app.tsx?

Basset Fauve de BretagneOP

2024-01-15T15:38:17.000Z

// pages/_app.tsx
import type { AppProps } from "next/app";
import { useEffect } from "react";
import Sortable, { MultiDrag } from "sortablejs";

export default function MyApp({ Component, pageProps }: AppProps) {
  useEffect(() => {
    Sortable.mount(new MultiDrag());
  }, []);
  return <Component {...pageProps} />;
}

it's the exact same as you gave earlier

@Basset Fauve de Bretagne tsx // pages/_app.tsx import type { AppProps } from "next/app"; import { useEffect } from "react"; import Sortable, { MultiDrag } from "sortablejs"; export default function MyApp({ Component, pageProps }: AppProps) { useEffect(() => { Sortable.mount(new MultiDrag()); }, []); return <Component {...pageProps} />; } it's the exact same as you gave earlier

Ray

2024-01-15T15:40:59.000Z

not sure, it is working for me

Basset Fauve de BretagneOP

2024-01-15T15:43:28.000Z

could it be my next version? ðŸ˜¢

Ray

2024-01-15T15:43:57.000Z

don't think it make different

Basset Fauve de BretagneOP

2024-01-15T15:44:33.000Z

I see. But anyways, thanks! I'll try creating another clean repo and see if it will work there

Ray

2024-01-15T15:45:19.000Z

I just tested with 13.2.3 and it works

  "dependencies": {
    "@types/sortablejs": "^1.15.7",
    "next": "13.2.3",
    "react": "^18",
    "react-dom": "^18",
    "react-sortablejs": "^6.1.4",
    "sortablejs": "^1.15.2"
  }

import { useEffect, useState } from "react";
import { ReactSortable } from "react-sortablejs";
import Sortable, { MultiDrag, Swap } from "sortablejs";

export default function TestPage() {
  useEffect(() => {
    Sortable.mount(new MultiDrag(), new Swap());
  }, []);

  return <MyReactSortable />;
}

function MyReactSortable() {
  const [state, setState] = useState([
    { id: 1, name: "shrek" },
    { id: 2, name: "fiona" },
  ]);
  return (
    <ReactSortable
      multiDrag // enables mutidrag
      // OR
      swap // enables swap
      list={state}
      setList={setState}
      selectedClass="selected"
    >
      {state.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </ReactSortable>
  );
}

this also work without _app.tsx

@Ray ts import { useEffect, useState } from "react"; import { ReactSortable } from "react-sortablejs"; import Sortable, { MultiDrag, Swap } from "sortablejs"; export default function TestPage() { useEffect(() => { Sortable.mount(new MultiDrag(), new Swap()); }, []); return <MyReactSortable />; } function MyReactSortable() { const [state, setState] = useState([ { id: 1, name: "shrek" }, { id: 2, name: "fiona" }, ]); return ( <ReactSortable multiDrag // enables mutidrag // OR swap // enables swap list={state} setList={setState} selectedClass="selected" > {state.map((item) => ( <div key={item.id}>{item.name}</div> ))} </ReactSortable> ); } this also work without `_app.tsx`

Ray

2024-01-15T15:50:34.000Z

this should be better if you only use ReactSortable in a page

Basset Fauve de BretagneOP

2024-01-15T15:53:28.000Z

dang, I just installed a new nextjs project(pages), installed the ff:

"dependencies": {
    "next": "13.2.3",
    "react": "^18",
    "react-dom": "^18",
    "react-sortablejs": "^6.1.4",
    "sortablejs": "^1.15.2"
  }

and literally copied both versions above that you've given me, but I'm still getting this error
Uncaught Sortable: Cannot mount plugin multiDrag more than once

did I miss something?

@Ray this should be better if you only use `ReactSortable` in a page

Basset Fauve de BretagneOP

2024-01-15T15:59:47.000Z

oh, I've added try and catch block and it's fixed now. Thank you @Ray

try {
      Sortable.mount(new MultiDrag(), new Swap());
    } catch {}