atlassian
Connect(Droppable): Support for defaultProps will be removed from memo components in a future major release. Use JavaScript default parameters instead.
Connect(Droppable): Support for defaultProps will be removed from memo components in a future major release. Use JavaScript default parameters instead.
any one have solution for this problem but remember don't suggest for { reactStrictMode: false }
Same here. I don't know exactly what is causing this.
Warning: Connect(Droppable): Support for defaultProps will be removed from memo components in a future major release. Use JavaScript default parameters instead.
It's at least this line: https://github.com/atlassian/react-beautiful-dnd/blob/ae7bcf326928fea3615dfed092dd4261a3976e0d/src/view/droppable/connected-droppable.js#L278
This kind of a patch helped to get rid of it in our project:
diff --git a/dist/react-beautiful-dnd.esm.js b/dist/react-beautiful-dnd.esm.js
index ecced698aefb8b8e97a196195ef77955941e0b72..4753f5f9ba6c92969c6fa8bf81eb2fda389b4c72 100644
--- a/dist/react-beautiful-dnd.esm.js
+++ b/dist/react-beautiful-dnd.esm.js
@@ -8235,7 +8235,18 @@ function PublicDraggable(props) {
}));
}
-function Droppable(props) {
+function Droppable(passedProps) {
+ var defaultProps = {
+ mode: 'standard',
+ type: 'DEFAULT',
+ direction: 'vertical',
+ isDropDisabled: false,
+ isCombineEnabled: false,
+ ignoreContainerClipping: false,
+ renderClone: null,
+ getContainerForClone: getBody
+ };
+ var props = { ...defaultProps, ...passedProps };
var appContext = useContext(AppContext);
!appContext ? process.env.NODE_ENV !== "production" ? invariant(false, 'Could not find app context') : invariant(false) : void 0;
var contextId = appContext.contextId,
@@ -8494,21 +8505,10 @@ function getBody() {
return document.body;
}
-var defaultProps = {
- mode: 'standard',
- type: 'DEFAULT',
- direction: 'vertical',
- isDropDisabled: false,
- isCombineEnabled: false,
- ignoreContainerClipping: false,
- renderClone: null,
- getContainerForClone: getBody
-};
var ConnectedDroppable = connect(makeMapStateToProps$1, mapDispatchToProps$1, null, {
context: StoreContext,
pure: true,
areStatePropsEqual: isStrictEqual
})(Droppable);
-ConnectedDroppable.defaultProps = defaultProps;
export { DragDropContext, PublicDraggable as Draggable, ConnectedDroppable as Droppable, resetServerContext, useKeyboardSensor, useMouseSensor, useTouchSensor };
I've understood this project is being sunsetted and replaced with Pragmatic drag and drop (see #2573), and no further development will be done apart from security fixes. The README says:
We recommend that you don’t raise issues or pull requests, as they will not be reviewed or actioned until further notice.
So it seems patching the package (via e.g. patch-package or yarn patch/pnpm patch) is the most convenient way to solve this.
Hi, I have tried to change the file with the patch-package. Thanks for the suggestion. However, I get this error now:
Uncaught ReferenceError: Droppable is not defined at ./node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.esm.js (react-beautiful-dnd.esm.js:7340:1)
any thoughts what might be the case here?
Hi, I have tried to change the file with the patch-package. Thanks for the suggestion. However, I get this error now:
Uncaught ReferenceError: Droppable is not defined at ./node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.esm.js (react-beautiful-dnd.esm.js:7340:1)
any thoughts what might be the case here?
Could be some syntactic error with the changes, though the source line 7340 is surprising because Droppable is only referenced at the almost end of the file where the line numbers go over 8000, but maybe you have something in your pipeline transforming it afterwards.
One thing you could try is applying the changes with the standard patch command if it's available in your system:
- Reset all changes you've made in
react-beautiful-dnd - Go to the installed package directory:
cd node_modules/react-beautiful-dnd - Apply the patch:
patch << 'EOF'
diff --git a/dist/react-beautiful-dnd.esm.js b/dist/react-beautiful-dnd.esm.js
index ecced698aefb8b8e97a196195ef77955941e0b72..4753f5f9ba6c92969c6fa8bf81eb2fda389b4c72 100644
--- a/dist/react-beautiful-dnd.esm.js
+++ b/dist/react-beautiful-dnd.esm.js
@@ -8235,7 +8235,18 @@ function PublicDraggable(props) {
}));
}
-function Droppable(props) {
+function Droppable(passedProps) {
+ var defaultProps = {
+ mode: 'standard',
+ type: 'DEFAULT',
+ direction: 'vertical',
+ isDropDisabled: false,
+ isCombineEnabled: false,
+ ignoreContainerClipping: false,
+ renderClone: null,
+ getContainerForClone: getBody
+ };
+ var props = { ...defaultProps, ...passedProps };
var appContext = useContext(AppContext);
!appContext ? process.env.NODE_ENV !== "production" ? invariant(false, 'Could not find app context') : invariant(false) : void 0;
var contextId = appContext.contextId,
@@ -8494,21 +8505,10 @@ function getBody() {
return document.body;
}
-var defaultProps = {
- mode: 'standard',
- type: 'DEFAULT',
- direction: 'vertical',
- isDropDisabled: false,
- isCombineEnabled: false,
- ignoreContainerClipping: false,
- renderClone: null,
- getContainerForClone: getBody
-};
var ConnectedDroppable = connect(makeMapStateToProps$1, mapDispatchToProps$1, null, {
context: StoreContext,
pure: true,
areStatePropsEqual: isStrictEqual
})(Droppable);
-ConnectedDroppable.defaultProps = defaultProps;
export { DragDropContext, PublicDraggable as Draggable, ConnectedDroppable as Droppable, resetServerContext, useKeyboardSensor, useMouseSensor, useTouchSensor };
EOF
- Create the project patch file in the project directory, for example
cd ../.. && npx patch-package react-beautiful-dnd
I have this console error too in my nextjs app but everything is working properly:
my version: "react-beautiful-dnd": "^13.1.1"
part of my code, can someone help?
<DragDropContext onDragEnd={onDragEnd}>
<div ref={ref}>
<div className='items-left mb-2 flex space-x-2 '>
{pathParts.map((part, index) =>
isPartCurrentDir(currentDir, part) ? (
// current folder is not clickable nor droppable
<span key={part}>{part}</span>
) : (
// other folder levels are clickable and droppable
<Droppable
key={index}
droppableId={pathParts
.slice(0, index + 1)
.join('')}
type='GCS' // Droppable of type GCS will only allow Draggable of type GCS to drop on it
>
{(provided, snapshot) => (
<div
ref={provided.innerRef}
{...provided.droppableProps}
className={`h-8 cursor-pointer overflow-hidden hover:underline ${snapshot.isDraggingOver ? 'bg-gray-100' : ''} w-[${Math.max(20, part.length)}px]`}
onClick={() => {
if (searchInput)
setSearchInput('');
setCurrentDir(
pathParts
.slice(0, index + 1)
.join(''),
);
}}
>
{part}
{provided.placeholder}
</div>
)}
</Droppable>
),
)}
</div>
<Grid container spacing={1} className='pb-2 font-bold'>
<Grid item md={8}>
<Typography>Name</Typography>
</Grid>
{!shouldHideSize && (
<Grid item md={1}>
<Typography align='right'>Size</Typography>
</Grid>
)}
{!shouldHideLastModified && (
<Grid item md={3}>
<Typography align='right'>
Last Modified
</Typography>
</Grid>
)}
</Grid>
<Droppable
key='upload-files'
droppableId='upload-files'
>
{(provided) => (
<div
{...provided.droppableProps}
ref={provided.innerRef}
className='max-h-72 overflow-y-auto'
onDragOver={(event) => {
event.preventDefault();
event.currentTarget.classList.add(
'bg-gray-200',
);
}}
onDragLeave={(event) => {
event.currentTarget.classList.remove(
'bg-gray-200',
);
}}
onDrop={(event) => {
event.preventDefault();
event.currentTarget.classList.remove(
'bg-gray-200',
);
handleUpload(event.dataTransfer.files);
}}
>
{fileSearchResults.map((file, index) => (
<Droppable // TODO: figure out how to keep the droppable text where it is during dropover event
key={file.name}
droppableId={currentDir + file.name}
type='GCS' // Droppable of type GCS will only allow Draggable of type GCS to drop on it
isDropDisabled={
!isDirectory(file.name)
}
>
{(provided, snapshot) => (
<div
ref={provided.innerRef}
{...provided.droppableProps}
className={
snapshot.isDraggingOver
? 'bg-gray-200'
: ''
}
>
<Draggable
key={file}
draggableId={file.name}
index={index}
type='GCS'
>
{(provided) => (
<Grid
container
spacing={1}
ref={
provided.innerRef
}
{...provided.draggableProps}
{...provided.dragHandleProps}
className='rounded hover:bg-gray-200'
onDoubleClick={() =>
handleFolderDoubleClick(
file.name,
)
}
onContextMenu={(
e,
) =>
handleFileRightClick(
e,
file,
)
}
title={
file.name
}
>
<Grid
item
md={8}
className='items-right flex overflow-hidden'
>
{isDirectory(
file.name,
) ? (
<FaRegFolder className='mr-2' />
) : (
<FaRegFile className='mr-2' />
)}
<span>
{
file.name
}
</span>
</Grid>
{!shouldHideSize && (
<Grid
item
md={1}
className='text-right'
>
<Typography>
{file.size ||
'-'}
</Typography>
</Grid>
)}
{!shouldHideLastModified && (
<Grid
item
md={3}
className='text-right'
>
<Typography>
{new Date(
file.last_modified,
).toLocaleString()}
</Typography>
</Grid>
)}
</Grid>
)}
</Draggable>
{provided.placeholder}
</div>
)}
</Droppable>
))}
{provided.placeholder}
</div>
)}
</Droppable>
{loadingFiles && (
<div className='flex items-center justify-center'>
<FaSync className='animate-spin text-lg' />
</div>
)}
</div>
</DragDropContext>
I have this console error too in my nextjs app but everything is working properly:
my version: "react-beautiful-dnd": "^13.1.1"
part of my code, can someone help?
...
Migrate over to https://github.com/hello-pangea/dnd
And try again
See https://github.com/atlassian/react-beautiful-dnd/pull/2580#issuecomment-2222316418
