Unable to use faceapi in a nexjs - react application "Module not found: Can't resolve 'fs'"

[karthik-Gopalan]

Issue Description Getting the following error:

error - ./node_modules/@vladmandic/face-api/dist/face-api.esm.js:8:25031 Module not found: Can't resolve 'fs'

Steps to Reproduce create a nextjs application as given here:

https://nextjs.org/learn/basics/create-nextjs-app/setup

added face api packages (npm install). Including tensorflow Invoked the api to load the models: await faceapi.nets.ssdMobilenetv1.loadFromUri('/models')

And got the error:

Expected Behavior It should have loaded the models.

**Environment Windows 10. Nodejs. React application. Using VS code editor. Browser is chrome/Edge.

• Module version?
• Built-in demo or custom code? - custom
• Type of module used (e.g. js, esm, esm-nobundle)? js
• Browser or NodeJS and version (e.g. NodeJS 14.15 or Chrome 89)? - Node v14.13.1, Chrome Version 89.0.4389.90 (Official Build) (64-bit)
• OS and Hardware platform (e.g. Windows 10, Ubuntu Linux on x64, Android 10)? Windows 10
• Packager (if any) (e.g, webpack, rollup, parcel, esbuild, etc.)? standard webpack

Additional

• For installation or startup issues include your package.json
• For usage issues, it is recommended to post your code as gist

[vladmandic]

NextJS is a server-side-rendering framework and you're loading client-side browser module - so this usage is creating a hybrid?

What comes to mind:

• To have full SSR:
  you should be using NodeJS version of FaceAPI and have end-to-end server-side processing and rendering
• To have independent usage on client side regardless of NextJS: You can use IIFE version of FaceAPI and load it via Githubissues.
• Githubissues is a development platform for aggregating issues.