1

I am trying to import the javascript implementation of stockfish into my react app. I can replicate the above error by adding the following: 

let stockfish = new Worker('stockfish.js');

I have already tried to clear my cache and I think that it has to do with how I am loading stockfish.js. To replicate the error, all you have to do is create a new react app using create-react-app, install stockfish and add the above line.

This has been asked before (for example) but I can't find anything that applies to my situation.

Szpok
  • 53
  • 1
  • 1
  • 7

2 Answers2

3

I had similar problems, except in a vue app. Here are some suggestions.

  1. Is stockfish.js in your public folder of your project? I had to manually copy stockfish.js, stockfish.wasm and stockfish.asm.js from the stockfish module folding into the project's public folder. Not very NPM friendly.

  2. Try adding '/' to the path. That is, let stockfish = new Worker('/stockfish.js'); For me this solved a bug where if I called where the if I tried to make a new worker from a component with a route of say "localhost:8080/game/12341234", the request for stockfish would be sent to "localhost:8080/game/stockfish.js" instead of "localhost:8080/stockfish.js".

honkskillet
  • 3,007
  • 6
  • 31
  • 47
0

Firstly, place "stockfish.js" file into your React app's "public" folder and then you can use it like in example below

useEffect(() => {
  const stockfish = new Worker("./stockfish.js");
  const DEPTH = 8; // number of halfmoves the engine looks ahead
  const FEN_POSITION = // chess position in FEN format
    "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1";

  stockfish.postMessage("uci");
  stockfish.postMessage(`position fen ${FEN_POSITION}`);
  stockfish.postMessage(`go depth ${DEPTH}`);

  stockfish.onmessage = (e) => {
    console.log(e.data); // in the console output you will see `bestmove e2e4` message
  };
}, []);

For more advanced examples, you can see this guide

Ginger Bread
  • 576
  • 3
  • 12
  • 29