Error: [Immer] An immer producer returned a new value *and* modified its draft. Either return a new value *or* modify the draft. (Boardgame.io)

Question

i know there is a quite similar question here in stackoverflow but i cant figure out what is the error in my code. To sum up, im pretty new to React and Javascript (i also know nothing about redux) and I am doing a project in Boardgame.io. This platform has its own template to define the state and the rules of the game (turn/phases etc). The template is something like this:

export const Catan = {
setup: (ctx) => createInitialState(),

turn: {
    moveLimit: 5, //realmente no tiene limite
  },

moves: {
    diceRoll: (G) => {
        let roll = diceRoll();
        G.diceValue = roll;
    },
    buildRoad, },

Im doing a function that defines one of the posibles moves that one player can do (buildRoad):

  function buildRoad (G, ctx, id){

let playerID = 'player_' + ctx.currentPlayer;
let cPlayer = G[playerID];

if(cPlayer.resources.lumber < 1 || cPlayer.resources.brick <1){
  alert("Not enough rss");
  return INVALID_MOVE;
}

if(G.roadCells[id].value !== -1){
  alert("Already owned road");
  return INVALID_MOVE;
}

if(checkRoadBuild(G, cPlayer, id) === false){
  alert("Cant build without conection");
  return INVALID_MOVE;
}

// 1 lumber adn 1 brick
G.roadCells[id] = ctx.currentPlayer;
cPlayer.resources.brick--;
cPlayer.resources.lumber--;

return 1;

}

This function uses the object that defines the state G and other object with similar information ctx. What I do here with cPlayer is to call one of the objects players that i define inside G:

        player_0: {
      name : 'player_0',
      color : 'red',
      points : 0,
      longestRoad : false,
      largestArmy : false,
      devCards : [],
      resources : {
          brick: 3,
          lumber: 2,
          ore: 0,
          grain: 0,
          wool: 0
      },
      ownedTiles : new Array(19 + 1).join('0').split('').map(parseFloat),
      settlements : [],
      cities : [],
    },

In the last if, i call another check function and there is (i guess) where the error comes from, or at least i think that:

  function checkRoadBuild(G, cPlayer, id){

//search in settlements and cities
for(let i=0; i<cPlayer.settlements.length; i++){
  if(cPlayer.settlements[i] === G.roadCells[id].to || cPlayer.settlements[i] === G.roadCells[id].from)
    return true;
}
for(let i=0; i<cPlayer.cities.length; i++){
  if(cPlayer.cities[i] === G.roadCells[id].to || cPlayer.cities[i] === G.roadCells[id].from)
    return true;
}
//look for connected roads - TODO

return true;

}

This function its not finished yet, thats why it always return true, but the problem comes when i try to make the move buildRoad. The console shows this error:

index.js:1 ERROR: Error: [Immer] An immer producer returned a new value *and* modified its draft. Either return a new value *or* modify the draft.
at t (errors.ts:49)
at P (finalize.ts:27)
at e.i.produce (immerClass.ts:111)
at turn-order-ec34409c.js:169
at turn-order-ec34409c.js:547
at Object.processMove (reducer-fcd5a508.js:738)
at reducer-fcd5a508.js:903
at dispatch (redux.js:213)
at client-1ffa26ed.js:256
at client-1ffa26ed.js:300
at Object.dispatch (client-1ffa26ed.js:310)
at InteractiveFunction.dispatchers.<computed> (client-1ffa26ed.js:200)
at InteractiveFunction.Submit (Debug-753f485a.js:3852)
at Debug-753f485a.js:289
at Array.forEach (<anonymous>)
at Debug-753f485a.js:288
at Submit (Debug-753f485a.js:3646)
at HTMLSpanElement.OnKeyDown (Debug-753f485a.js:3657)

I ve been looking what could be my error in the code but i dont see anything strange. I have been reading about this error but i dont know much about immer and reducer (i think the error comes from that). I would thanks any help. I can send more info if need it.

Answer 1

I have already figured out it, it was a return that wasnt supposed to be there.