ValentinH
commented
2 years ago To be honest, I have never used UMD. Could you please share an example showing the error? I guess by using codepen.io?
Open rouralberto opened 2 years ago
ValentinH
commented
2 years ago To be honest, I have never used UMD. Could you please share an example showing the error? I guess by using codepen.io?
rouralberto
commented
2 years ago 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/react-easy-sort@1.5.0/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
commented
2 years ago 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...
I'm using the UMD build of react (just using
<script>tags and babel) to do a prototype and, when usingreact-easy-sortfrom the UMD build (unpkg.com/react-easy-sort@1.5.0/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:
When this happens?
As soon as I load the component, it doesn't render.