Face-api.js: SOLVED: Webpack warning about not found "fs" module

[etienne-martin]

I get the following warning when building my webapp with webpack:

[1] WARNING in ../node_modules/tfjs-image-recognition-base/build/es6/env/initialize.js
[1] Module not found: Error: Can't resolve 'fs' in '/Users/username/project/node_modules/tfjs-image-recognition-base/build/es6/env'
[1]  @ ../node_modules/tfjs-image-recognition-base/build/es6/env/initialize.js
[1]  @ ../node_modules/tfjs-image-recognition-base/build/es6/env/index.js
[1]  @ ../node_modules/tfjs-image-recognition-base/build/es6/index.js
[1]  @ ../node_modules/face-api.js/build/es6/index.js
[1]  @ ./src/index.tsx

I had to add the following to my webpack config to suppress the warning:

node: {
   fs: "empty"
}

It's weird because the target in my webpack config is set to web.

Am I doing something wrong? If not, this issue may help other people with the same warning.

[justadudewhohacks]

Thanks for reporting your solution!

It's because webpack sees the require('fs') in the code, but although it won't be required in a browser environment. face-api.js is not only a library for the browser anymore, if you are running in a nodejs environment fs will be required and used for reading model files from disk.

[etienne-martin]

Gotcha. Do you think there's a way to suppress the warning on the library side so that webpack doesn't complain?

[etienne-martin]

Thanks for your awesome work btw, it's really impressive how easy it is to implement facial detection using your library. Love it 🙏

[justadudewhohacks]

Hmm not sure if it's possible from the side of the library. The issue is the conditional require, since webpack cannot evaluate the condition. So I think your solution is the correct one, telling webpack, that it is safe to ignore the fs module.

Edit: The only option I see, is not to require fs at all and monkeyPatch fs into the environment manually, as done with the canvas implementation etc.

[etienne-martin]

Alright, I don't have time to investigate that monkeyPatch thing so I'll just close the issue for now.

Thanks again.

[francisacosta]

to ignore the error. add this code on your webpack.mix.js

mix.webpackConfig({ node: { fs: 'empty', } })

[maccuaa]

For webpack 5 you need:

resolve: {
    fallback: {
      fs: false
    }
  }

This really should be fixed in this lib though. Having to do this in my webpack config is clunky.