Connect(Droppable): Support for defaultProps will be removed from memo components in a future major release. Use JavaScript default parameters instead. about react-beautiful-dnd HOT 6 OPEN

It's at least this line:

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

from react-beautiful-dnd.

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.

from react-beautiful-dnd.

@peruukki can you make it a PR please ? 🙏

from react-beautiful-dnd.

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.

from react-beautiful-dnd.

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?

from react-beautiful-dnd.

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

from react-beautiful-dnd.