Pieces move off the board when chessboardjsx is minified

[ninjaPixel]

Using chessboardjsx with Create React App I noticed that there is funny behaviour when the app is built for production.

Using chess.js to generate random moves, my component looks like this:

function App() {
  const game = useRef(new Chess());
  const [fen, setFen] = useState(game.current.fen());
  const [play, setPlay] = useState(false);
  const [colorToPlay, setColorToPlay] = useState(game.current.turn());

  useEffect(() => {
    if (play) {
      const possibleMoves = game.current.moves({verbose: true});
      const randomIndex = _.random(0, possibleMoves.length - 1);
      game.current.move(possibleMoves[randomIndex]);
      setFen(game.current.fen())
       setTimeout(() => {
        setColorToPlay(game.current.turn());
      }, 1000);
    }

  }, [colorToPlay, play]);

  return (
    <div className="App">
      <header className="App-header">
        <Chessboard
          id="arena"
          position={fen}
          transitionDuration={500}
          lightSquareStyle={{backgroundColor: '#edf2f7'}}
          darkSquareStyle={{backgroundColor: '#a0aec0'}}
          width={400}
        />
        <button onClick={() => setPlay(!play)}>Play/Pause</button>
      </header>
    </div>
  );
}

Everything works fine when I run my CRA app using yarn start however, when built for production all the pieces move when the position prop is updated.

I've uploaded a short screencast to DropBox, and below is a screenshot:

I've reproduced the issue in this repo: https://github.com/ninjaPixel/chessboardjsx-issue

You can run it by executing:

yarn
yarn serve

I've also ejected the CRA app on this branch: https://github.com/ninjaPixel/chessboardjsx-issue/tree/eject If you modify the webpack config file, line 179 to turn the minification off, then the weird behaviour stops.

I'm not sure if this is an issue with terser-webpack-plugin or chessboardjsx but it's worth mentioning since terser-webpack-plugin is currently the de-facto minifier for webpack so it's likely that others may experience this issue.

[willb335]

Thank you for finding this bug. I'll do a little brainstorming to see if it could be something on chessboardjsx's end.

Cool seeing the project used with hooks, that's a first for me

[ninjaPixel]

Thank you, @willb335!!

[willb335]

Still not sure of the cause here. Just to rehash, when built for production, the pieces move incorrectly when the position prop is updated. The behavior is not there when running in development with CRA. The behavior is fixed when minification is turned off via the webpack.config.js.

At the very least, I'm hoping similar issues regarding the positon prop run across this issue. Thanks again