Getting console warnings and errors with using the latest react-trello in my react app

[hasham7861]

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Using React 16. With react-trello as current version
2. Using this Board component from reac-trello
   <Board cardDraggable={kanbanStyle === KANBAN_STYLES.status} className="task-kanban-container__board" style={{ backgroundColor: "#eaedf3" }} data={data} onCardClick={this.onCardClick} onCardMoveAcrossLanes={this.onCardMoveAcrossLanes} />
3. You can see all these all bunches of warnings for illegal prop drilling taking place to the DOM, and then some warnings wtih style-components

Expected behavior
No warnings or errors to show

Screenshots

Desktop (please complete the following information):

• OS: macOs Monterey version 12.6.8
• Browser: chrome
• Version: 119.0.6045.159 (Official Build) (x86_64)

[GersonDias]

same here =(

[micktdj]

same here too :(
Im getting also :

[micktdj]

Any update here ? Thank you

[GersonDias]

In my project I'm using the patch-package and I created a patch to fix the version 2.2.11. You can use the library or just git apply --ignore-whitespace patches/react-trello+2.2.11.patch

this solution is far from perfect and after applying this code you may remain with one warning (related to editLaneTitle property). The only way I found for this one was to create a custom LabelHeader component like this

<Board
    ...
    components={{
           LaneHeader: (props: { title: string }) => {
                  return (
                    <Typography variant="body1" fontWeight={'bold'}>
                      {props.title}
                    </Typography>
                  )
           },
   }}
   ...

I'll try to create a PR for later...

diff --git a/node_modules/react-trello/dist/controllers/BoardContainer.js b/node_modules/react-trello/dist/controllers/BoardContainer.js
index 2173f22..004341c 100644
--- a/node_modules/react-trello/dist/controllers/BoardContainer.js
+++ b/node_modules/react-trello/dist/controllers/BoardContainer.js
@@ -210,7 +210,49 @@ class BoardContainer extends _react.Component {
           laneStyle = _this$props5.laneStyle,
           onCardMoveAcrossLanes = _this$props5.onCardMoveAcrossLanes,
           t = _this$props5.t,
-          otherProps = (0, _objectWithoutProperties2.default)(_this$props5, ["id", "components", "reducerData", "draggable", "laneDraggable", "laneDragClass", "laneDropClass", "style", "onDataChange", "onCardAdd", "onCardUpdate", "onCardClick", "onBeforeCardDelete", "onCardDelete", "onLaneScroll", "onLaneClick", "onLaneAdd", "onLaneDelete", "onLaneUpdate", "editable", "canAddLanes", "laneStyle", "onCardMoveAcrossLanes", "t"]);
+          // patched to remove warnings in newer react versions (18 | 19)
+          otherProps = (0, _objectWithoutProperties2.default)(_this$props5, ["id", "components", "reducerData",
+              "draggable",
+              "laneDraggable",
+              "laneDragClass",
+              "laneDropClass",
+              "style",
+              "onDataChange",
+              "onCardAdd",
+              "onCardUpdate",
+              "onCardClick",
+              "onBeforeCardDelete",
+              "onCardDelete",
+              "onLaneScroll",
+              "onLaneClick",
+              "onLaneAdd",
+              "onLaneDelete",
+              "onLaneUpdate",
+              "editable",
+              "canAddLanes",
+              "laneStyle",
+              "onCardMoveAcrossLanes",
+              "t",
+              "handleLaneDragStart",
+              "handleLaneDragEnd",
+              "collapsibleLanes",
+              "cardDraggable",
+              "hideCardDeleteIcon",
+              "getCardDetails",
+              "index",
+              "droppable",
+              "labelStyle",
+              "editable",
+              "currentPage",
+              "laneDraggable",
+              "canAddLanes",
+              "handleDragEnd",
+              "actions",
+              "handleDragStart",
+              "cardDragClass",
+              "editLaneTitle",
+          ]);
+
     const addLaneMode = this.state.addLaneMode; // Stick to whitelisting attributes to segregate board and lane props
 
     const passthroughProps = (0, _pick.default)(this.props, ['onCardMoveAcrossLanes', 'onLaneScroll', 'onLaneDelete', 'onLaneUpdate', 'onCardClick', 'onBeforeCardDelete', 'onCardDelete', 'onCardAdd', 'onCardUpdate', 'onLaneClick', 'laneSortFunction', 'draggable', 'laneDraggable', 'cardDraggable', 'collapsibleLanes', 'canAddLanes', 'hideCardDeleteIcon', 'tagStyle', 'handleDragStart', 'handleDragEnd', 'cardDragClass', 'editLaneTitle', 't']);
diff --git a/node_modules/react-trello/dist/controllers/Lane.js b/node_modules/react-trello/dist/controllers/Lane.js
index 51cf13f..622a72e 100644
--- a/node_modules/react-trello/dist/controllers/Lane.js
+++ b/node_modules/react-trello/dist/controllers/Lane.js
@@ -4,9 +4,8 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+Object.defineProperty(exports, "__esModule", { value: true });
+
 exports.default = void 0;
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -316,7 +315,41 @@ class Lane extends _react.Component {
           onLaneUpdate = _this$props2.onLaneUpdate,
           onCardUpdate = _this$props2.onCardUpdate,
           onCardMoveAcrossLanes = _this$props2.onCardMoveAcrossLanes,
-          otherProps = (0, _objectWithoutProperties2.default)(_this$props2, ["id", "cards", "collapsibleLanes", "components", "onLaneClick", "onLaneScroll", "onCardClick", "onCardAdd", "onBeforeCardDelete", "onCardDelete", "onLaneDelete", "onLaneUpdate", "onCardUpdate", "onCardMoveAcrossLanes"]);
+          t = _this$props2.t,
+          // patched to remove warnings in newer react versions (18 | 19)
+          otherProps = (0, _objectWithoutProperties2.default)(_this$props2, ["id", "cards",
+              "collapsibleLanes",
+              "components",
+              "onLaneClick",
+              "onLaneScroll",
+              "onCardClick",
+              "onCardAdd",
+              "onBeforeCardDelete",
+              "onCardDelete",
+              "onLaneDelete",
+              "onLaneUpdate",
+              "onCardUpdate",
+              "onCardMoveAcrossLanes",
+              "boardId",
+              "actions",
+              "cardDraggable",
+              "cardDragClass",
+              "t",
+              "titleStyle",
+              "handleDragEnd",
+              "handleDragStart",
+              "hideCardDeleteIcon",
+              "canAddLanes",
+              "laneDraggable",
+              "currentPage",
+              "editable",
+              "labelStyle",
+              "droppable",
+              "getCardDetails",
+              "editLaneTitle",
+              "index",
+          ]);
+
     const allClassNames = (0, _classnames.default)('react-trello-lane', this.props.className || '');
     const showFooter = collapsibleLanes && cards.length > 0;
     return _react.default.createElement(components.Section, (0, _extends2.default)({}, otherProps, {
@@ -326,7 +359,8 @@ class Lane extends _react.Component {
       className: allClassNames
     }), this.renderHeader((0, _objectSpread2.default)({
       id,
-      cards
+      cards,
+      t
     }, otherProps)), this.renderDragContainer(isDraggingOver), loading && _react.default.createElement(components.Loader, null), showFooter && _react.default.createElement(components.LaneFooter, {
       onClick: this.toggleLaneCollapsed,
       collapsed: collapsed

[GersonDias]

Created the #545 addressing this