Not working with Next.js 13.5.5

[alamgir8]

I'm trying to use it with next.js version 13.5.5. but it shows an error when try to drag, Here is my setup

`import { arrayMoveImmutable } from "array-move"; import SortableList, { SortableItem } from "react-easy-sort";

const MenuCard = ({ menuRef, menuToggle, categoryList, handleSorting, handleScrollMenu, }) => { const { showingTranslateValue } = useUtilsFunction(); const [categoryList, setCategoryList] = useState([]);

const handleSorting = (oldIndex, newIndex) => { setCategoryList((array) => arrayMoveImmutable(array, oldIndex, newIndex)); };

return ( <div ref={menuRef} className="flex w-full overflow-y-scroll scrollbar-hide items-center gap-4 whitespace-nowrap"

<SortableList onSortEnd={handleSorting} // className="list" className="flex justify-start gap-4" draggedItemClassName="dragged"

{categoryList?.map((category, index) => (

handleScrollMenu( `${category._id}-${index + 1}`, category.name ) } className="text-sm font-medium text-gray-700 tracking-wide pb-2 w-full" {showingTranslateValue(category?.name)}

))}

); };

export default MenuCard;`

The error is this : _TypeError: (0 , array_move__WEBPACK_IMPORTED_MODULE_0__.default) is not a function

_

[ValentinH]

The error doesn't seem to come from this lib but from the array-move one.

[ValentinH]

Actually I just noticed that the lib was also directly importing from array-move... https://github.com/ValentinH/react-easy-sort/blob/main/src/index.tsx#L1

Could you share an example showing the issue?

[alamgir8]

@ValentinH, Thanks for your quick reply. Yes, I know it's coming from other packages. So, I think it will be better to attach those two functions for array move into your package instead of using the external package so that your package will be independent and will not cause any issues, As those two simple functions.

I made two custom functions instead of using their package array-move and now it's working fine.

Thanks

[ValentinH]

Ok so it means that the issue wasn't due to our internal usage of array-move.

What version were you using? Maybe it's shipping ESM and you need to let Next.js know about it.

[alamgir8]

I'm using the latest version of both your and the array-move package(Now the array-move package is removed), Node version 18.18.2

[ValentinH]

Ok I understand: the latest version (4.0.0) is indeed shipping ESM. See https://github.com/sindresorhus/array-move/releases/tag/v4.0.0

If you really wanted to use it in Next.js, you would have to pass it to the transpilePackages option.

On my side, I might eventually include the function directly in the lib to limit the dependencies, even though v3.0 works fine.