Error compiling the NPM package Stockfish.js (chess engine) as a Web Worker with Angular8

Viewed 644

The goal is an Angular app that can run and play against a chess engine in the browser. I want to run Stockfish.js as a Web Worker. When calling the Worker() constructor with the uri pointing to the stockfish.js file, Angular fails to compile with a 'Module build failed' error.

This is a brand new Angular app that I just started to test the chess engine in the browser. I'm running...

Angular CLI: 8.0.3 Node: 10.16.0 OS: darwin x64 Angular: 8.0.2 Chess engine: Stockfish.js 10.0 from NPM

As a sanity check I served a plain HTML and JS file running stockfish.js as a Web Worker and it runs fine. Same code without Typescript and Angular.

I've not found any examples of, or problems with people using a large 3rd party NPM package like this as a Web Worker in their Angular projects.

I feel like I'm missing something with what the stockfish.js file is trying to do with the stockfish.wasm file that the Angular compiler doesn't like.

This code I got from the Angular Docs, the section on Web Workers. And I'm passing the path to stockfish to the Worker() constructor.

app/app.component.ts

  const worker = new Worker ('../../node_modules/stockfish/src/stockfish.js', { type: 'module' });
  worker.onmessage = ({ data }) => {
    console.log(`page got message: ${data}`);
  };
  worker.postMessage('isready');

This is the config file Angular CLI generated

tsconfig.worker.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/worker",
    "lib": [
      "es2018",
      "webworker"
    ],
    "types": []
  },
  "include": [
    "src/**/*.worker.ts"
  ]
}

Stockfish file structure

node_modules
 - stockfish
    -src
      license.js
      stockfish.asm.js
      stockfish.js
      stockfish.wasm

This is the error I get when Angular compiles...

Module build failed (from ./node_modules/worker-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve 'fs' in '/Users/nicksugar/Chess/node_modules/stockfish/src'
    at factory.create (/Users/nicksugar/Chess/node_modules/webpack/lib/Compilation.js:823:10)
    at factory (/Users/nicksugar/Chess/node_modules/webpack/lib/NormalModuleFactory.js:397:22)
    at resolver (/Users/nicksugar/Chess/node_modules/webpack/lib/NormalModuleFactory.js:130:21)
    at asyncLib.parallel (/Users/nicksugar/Chess/node_modules/webpack/lib/NormalModuleFactory.js:224:22)
    at /Users/nicksugar/Chess/node_modules/neo-async/async.js:2830:7
    at /Users/nicksugar/Chess/node_modules/neo-async/async.js:6877:13
    at normalResolver.resolve (/Users/nicksugar/Chess/node_modules/webpack/lib/NormalModuleFactory.js:214:25)
    at doResolve (/Users/nicksugar/Chess/node_modules/enhanced-resolve/lib/Resolver.js:184:12)
    at hook.callAsync (/Users/nicksugar/Chess/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/Users/nicksugar/Chess/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at resolver.doResolve (/Users/nicksugar/Chess/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:37:5)
    at hook.callAsync (/Users/nicksugar/Chess/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/Users/nicksugar/Chess/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at hook.callAsync (/Users/nicksugar/Chess/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/Users/nicksugar/Chess/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at resolver.doResolve (/Users/nicksugar/Chess/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:42:38)```
1 Answers

Try installing custom angular builder and with webpack disable fs

run npm i -D @angular-builders/custom-webpack

edit your angular.json to tell it to use the custom-webpack module to extend the virtual config with your webpack.config.js file Create your custom webpack.config.js:

module.exports = {
    node: {
        fs: 'empty'
      }
};

See this link for more details

Related