Uncaught TypeError: Cannot read property 'laneId' of null

[ghost]

Describe the bug

When dragging a card I get the following error. index.js:82 Uncaught TypeError: Cannot read property 'laneId' of null After the error has occurred no more cards can be dragged.

To Reproduce

1. Clone this repo: https://github.com/timoken/react-trello-test
2. $ npm install
3. $ npm start
4. Drag a card
5. Check js console

Expected behavior

No error should appear

Screenshots

Environment

• OS: macOS 10.14.6
• Browser: Google Chrome 77.0.3865.120

Minimal example code to reproduce

See https://github.com/timoken/react-trello-test/blob/master/src/App.js

import React from "react";
import Board from "react-trello";

export default class App extends React.Component {
  data = {
    lanes: [
      {
        id: "lane1",
        title: "Planned Tasks",
        label: "2/2",
        cards: []
      },
      {
        id: "lane2",
        title: "Completed",
        label: "0/0",
        cards: []
      }
    ]
  };

  componentDidMount() {
    this.pushData();
  }

  pushData() {
    const { lanes } = this.data;
    for (let i = 0; i < 10; i += 1) {
      lanes[1].cards.push({
        id: "lane-1-item-" + i,
        title: "lane-1-item-" + i
      });
    }

    for (let i = 0; i < 10; i += 1) {
      lanes[0].cards.push({
        id: "lane-0-item-" + i,
        title: "lane-0-item-" + i
      });
    }

    this.forceUpdate();
  }

  render() {
    return (
      <div className="main-page">
        <Board data={this.data} />
      </div>
    );
  }
}

Update 2012/10/22 13:00 CEST

I found out that the issue seems to be that I populate the card data after component has mounted. If I fill react-trello right from the start then the issue doesn't rise. However, I need to be able to dynamically add cards. For example, when database content changes, then this needs to be reflected in my trello board.

What is the best practice here to add cards programmatically after initialization?

[IamDixit]

Any update on this? or any workaround?? I am also facing same issue.

[guifeliper]

Same issue here! I am using the Socket.io to emit for all my users logged in, and I get the same error. It still works, but I get the error on the console log. Uncaught TypeError: Cannot read property 'laneId' of undefined

[Arrow66]

Hey I'm also facing this issue Any fixes ?

[orlandovallejos]

I tried to fix the problem updating the lanes using "eventBusHandle" but I get the same result. After moving a card to a different lane (if I move it to the same lane everything works just fine) I get the error mentioned above, and I cannot move any card after this.

@guifeliper When you said:

It still works, but I get the error on the console log.

Are you able to move another cards after you get the error? 🤔

[racoonx]

There is quick workaround that worked for me. Add 'laneId' field for each card object. Like following: { id: 'lane1', title: 'Lane 1', cards: [{ id: 'card1', title: 'Card 1', laneId: 'lane1' }] }

[mdanielcristian]

Any updates? I am still facing the same issue. It's because I'm updating the boardData onDragEnd so it enters the moveCardAcrossLanes from LaneHelper after the state is updated and the card is no longer in the from lane (already moved in the to lane by the state change). Any workaround for this?

[flarpy]

A workaround for anyone updating with onDragEnd: add a onCardMoveAcrossLanes event handler. Firstly, add a laneId property to each card as suggested by racoonx above.

In your onDragEnd event handler remove logic for moving card across lanes:

eg

if (sourceLaneId !== targetLaneId){
    return;
}

In your onCardMoveAcrossLanes event handler put your update logic:

eg

task.boardPosition = index;
if (toLaneId === 'lane1'){
    task.progress.value = 0;
} else if (toLaneId === 'lane2'){
    task.progress.value = 50;
} else {
    task.progress.value = 100;
}

[kobimantzur]

Hey! I am also facing this issue. It happens when I override handleDragEnd event.

<Board
        data={{ lanes: boardLanes }}
        components={{ Card: DealCard }}
        handleDragEnd={handleDragEnd}
        handleDragStart={handleDragStart}
        onCardClick={onCardClick}
      />

[sdabhi23]

@racoonx thanks a lot for the workaround, works like a charm

@timoken I tried adding cards in the componentWillMount method still I am getting the same issue. Did you find a solution?

[ghost]

@sdabhi23 Found out that react-trello essentially uses smooth-dnd internally for all the drag and drop stuff. So I ditched react-trello and now using react-smooth-dnd instead.

[abhicodes97]

Same issue here! I am not able to use event.publish to move cards programmatically. Uncaught TypeError: Cannot read property 'laneId' of undefined