UMD build not working

[rouralberto]

I'm using the UMD build of react (just using <script> tags and babel) to do a prototype and, when using react-easy-sort from the UMD build (unpkg.com/[email protected]/umd/react-easy-sort.js), it errors. How am I supposed to use the UMD build of this package?

Code:

Same as in the examples: https://codesandbox.io/s/react-easy-sort-vertical-list-demo-njg4i. But loading everything in the UMD fashion.

Error:

Uncaught TypeError: Cannot read properties of undefined (reading '__rest')
    at SortableList (index.tsx:44:10)
    at renderWithHooks (react-dom.development.js:16315:20)
    at mountIndeterminateComponent (react-dom.development.js:20084:15)
    at beginWork (react-dom.development.js:21597:18)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4151:16)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4200:18)
    at invokeGuardedCallback (react-dom.development.js:4264:33)
    at beginWork$1 (react-dom.development.js:27461:9)
    at performUnitOfWork (react-dom.development.js:26567:14)
    at workLoopSync (react-dom.development.js:26476:7)
SortableList @ index.tsx:44
renderWithHooks @ react-dom.development.js:16315
mountIndeterminateComponent @ react-dom.development.js:20084
beginWork @ react-dom.development.js:21597
callCallback @ react-dom.development.js:4151
invokeGuardedCallbackDev @ react-dom.development.js:4200
invokeGuardedCallback @ react-dom.development.js:4264
beginWork$1 @ react-dom.development.js:27461
performUnitOfWork @ react-dom.development.js:26567
workLoopSync @ react-dom.development.js:26476
renderRootSync @ react-dom.development.js:26444
performSyncWorkOnRoot @ react-dom.development.js:26095
flushSyncCallbacks @ react-dom.development.js:12052
(anonymous) @ react-dom.development.js:25661
index.tsx:44 Uncaught TypeError: Cannot read properties of undefined (reading '__rest')
    at SortableList (index.tsx:44:10)
    at renderWithHooks (react-dom.development.js:16315:20)
    at mountIndeterminateComponent (react-dom.development.js:20084:15)
    at beginWork (react-dom.development.js:21597:18)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4151:16)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4200:18)
    at invokeGuardedCallback (react-dom.development.js:4264:33)
    at beginWork$1 (react-dom.development.js:27461:9)
    at performUnitOfWork (react-dom.development.js:26567:14)
    at workLoopSync (react-dom.development.js:26476:7)
SortableList @ index.tsx:44
renderWithHooks @ react-dom.development.js:16315
mountIndeterminateComponent @ react-dom.development.js:20084
beginWork @ react-dom.development.js:21597
callCallback @ react-dom.development.js:4151
invokeGuardedCallbackDev @ react-dom.development.js:4200
invokeGuardedCallback @ react-dom.development.js:4264
beginWork$1 @ react-dom.development.js:27461
performUnitOfWork @ react-dom.development.js:26567
workLoopSync @ react-dom.development.js:26476
renderRootSync @ react-dom.development.js:26444
recoverFromConcurrentError @ react-dom.development.js:25860
performSyncWorkOnRoot @ react-dom.development.js:26106
flushSyncCallbacks @ react-dom.development.js:12052
(anonymous) @ react-dom.development.js:25661
react_devtools_backend.js:4026 The above error occurred in the <SortableList> component:

    at SortableList (https://unpkg.com/[email protected]/umd/react-easy-sort.js:305:23)
    at div
    at div
    at div
    at Nftify (<anonymous>:30:9)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
overrideMethod @ react_devtools_backend.js:4026
logCapturedError @ react-dom.development.js:18697
update.callback @ react-dom.development.js:18730
callCallback @ react-dom.development.js:13933
commitUpdateQueue @ react-dom.development.js:13954
commitLayoutEffectOnFiber @ react-dom.development.js:23401
commitLayoutMountEffects_complete @ react-dom.development.js:24698
commitLayoutEffects_begin @ react-dom.development.js:24684
commitLayoutEffects @ react-dom.development.js:24622
commitRootImpl @ react-dom.development.js:26833
commitRoot @ react-dom.development.js:26692
performSyncWorkOnRoot @ react-dom.development.js:26127
flushSyncCallbacks @ react-dom.development.js:12052
(anonymous) @ react-dom.development.js:25661
react-dom.development.js:12066 Uncaught TypeError: Cannot read properties of undefined (reading '__rest')
    at SortableList (index.tsx:44:10)
    at renderWithHooks (react-dom.development.js:16315:20)
    at mountIndeterminateComponent (react-dom.development.js:20084:15)
    at beginWork (react-dom.development.js:21597:18)
    at beginWork$1 (react-dom.development.js:27436:16)
    at performUnitOfWork (react-dom.development.js:26567:14)
    at workLoopSync (react-dom.development.js:26476:7)
    at renderRootSync (react-dom.development.js:26444:9)
    at recoverFromConcurrentError (react-dom.development.js:25860:22)
    at performSyncWorkOnRoot (react-dom.development.js:26106:22)
SortableList @ index.tsx:44
renderWithHooks @ react-dom.development.js:16315
mountIndeterminateComponent @ react-dom.development.js:20084
beginWork @ react-dom.development.js:21597
beginWork$1 @ react-dom.development.js:27436
performUnitOfWork @ react-dom.development.js:26567
workLoopSync @ react-dom.development.js:26476
renderRootSync @ react-dom.development.js:26444
recoverFromConcurrentError @ react-dom.development.js:25860
performSyncWorkOnRoot @ react-dom.development.js:26106
flushSyncCallbacks @ react-dom.development.js:12052
(anonymous) @ react-dom.development.js:25661

When this happens?

As soon as I load the component, it doesn't render.

[ValentinH]

To be honest, I have never used UMD. Could you please share an example showing the error? I guess by using codepen.io?

[rouralberto]

Sure, I prepared a one-file HTML so you can copy-paste it and you can see the issue:

<html lang="en-EN">
<head>
    <title>react-easy-sort UMD</title>
</head>
<body>

<div id="app"></div>

<script type="text/javascript" src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script type="text/javascript" src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script type="text/javascript" src="https://unpkg.com/[email protected]/umd/react-easy-sort.js"></script>
<script type="text/javascript" src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script type="text/babel">
  'use strict';

  const {default: SortableList, SortableItem} = ReactEasySort;

  class App extends React.Component {
    items = [
      "A",
      "B",
      "C",
      "D",
    ];

    onSortEnd = () => {
      console.log('sorting!');
    };

    render () {
      return (
        <SortableList onSortEnd={this.onSortEnd} className="list" draggedItemClassName="dragged">
          {this.items.map((item) => (
            <SortableItem key={item}>
              <div className="item">{item}</div>
            </SortableItem>
          ))}
        </SortableList>
      );
    }
  }

  ReactDOM.createRoot(document.querySelector('#app')).render(
    <App/>
  );
</script>
</body>
</html>

As you may see, if you replace everything in the return() with something like <p>hola</p> it will just render as usual. But using the SortableList it breaks.

[ValentinH]

Sorry for the late response.

I just tried to have a look and I don't understand how UMD is supposed to work. Any help is welcome if someone knows how to fix this issue...