Connect(Droppable): Support for defaultProps will be removed from memo components in a future major release. Use JavaScript default parameters instead.

[awais-se]

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 }

[marcoosvlopes]

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.

[peruukki]

It's at least this line:

react-beautiful-dnd/src/view/droppable/connected-droppable.js

Line 278 in ae7bcf3

ConnectedDroppable.defaultProps = defaultProps;

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 };

[g3r4n]

@peruukki can you make it a PR please ? 🙏

[peruukki]

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.

[fmeert]

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?

[peruukki]

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:

1. Reset all changes you've made in react-beautiful-dnd
2. Go to the installed package directory: cd node_modules/react-beautiful-dnd
3. 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

4. Create the project patch file in the project directory, for example cd ../.. && npx patch-package react-beautiful-dnd

[lawrencenika]

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>

[jord1e]

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 #2580 (comment)