React集成face-api.js实现人脸检测时遇Source Map加载错误

可行解决方案 #

1. 直接禁用Source Map生成 #

用Create React App搭建的项目，修改package.json的启动脚本：

"scripts": {
  "start": "GENERATE_SOURCEMAP=false react-scripts start"
}

或者在项目根目录新建.env文件，写入：

GENERATE_SOURCEMAP=false

这样开发环境就不会生成和解析source map，直接跳过该错误。

2. 修正face-api.js的导入方式 #

不要导入TS源文件，直接使用npm包编译好的JS版本：

import * as faceapi from 'face-api.js';

加载模型时，将模型文件放在public/models目录下，用相对路径加载：

await faceapi.loadSsdMobilenetv1Model('/models');

3. 重置依赖环境 #

删除node_modules和锁文件后重新安装依赖：

rm -rf node_modules package-lock.json
npm install

依赖缓存可能导致奇怪的文件引用问题，重置后大概率能解决。

4. 切换到稳定兼容版本 #

face-api.js部分新版本可能和React开发工具不兼容，试试回退到0.22.2版本：

npm uninstall face-api.js
npm install face-api.js@0.22.2

5. 自定义webpack忽略face-api的source map（非CRA项目） #

如果是自行配置webpack的项目，在webpack.config.js中添加规则，跳过face-api.js的source map解析：

module.exports = {
  devtool: 'eval-cheap-module-source-map',
  module: {
    rules: [
      {
        test: /\.js$/,
        enforce: 'pre',
        use: ['source-map-loader'],
        exclude: [/node_modules\/face-api.js/]
      }
    ]
  }
};

本质上这个错误是因为face-api.js的npm包未附带完整的TS源文件对应的source map，开发工具找不到源文件才报错，上述方法均可绕开该问题。

内容的提问来源于stack exchange，提问作者Aritra Mondal