Javascript TypeError:部署到Netlify后无法将类作为函数调用？

您好，我正在尝试将web应用部署到Netlify。它在前端使用COCO SSD模型进行对象识别，这是有目的的。该web应用在localhost上运行良好，但一旦部署到Netlify，就会出现以下错误：

detector.js:47 TypeError: Cannot call a class as a function
    at r (classCallCheck.js:3)
    at new t (tensor.ts:266)
    at t.value (engine.ts:736)
    at i (tensor_ops_util.ts:75)
    at i (tensor.ts:55)
    at Module.p (io_utils.ts:223)
    at t.value (graph_model.ts:139)
    at t.<anonymous> (graph_model.ts:119)
    at c (runtime.js:63)
    at Generator._invoke (runtime.js:293)

detector.js:47 TypeError:无法将类作为函数调用
在r（classCallCheck.js:3）
在新t（张量ts:266）
t值时（发动机ts:736）
在i处（张量：75）
在i（张量ts:55）
at模块p（io_utils.ts:223）
t.值时（图_模型ts:139）
在t。（图2.ts:119）
在c时（runtime.js:63）
在生成器处调用（runtime.js:293）

我以前从来没有遇到过这个问题，觉得很奇怪，这是我实现COCO SSD模型和类的代码

import React from 'react';
import Lottie from 'react-lottie';
import * as cocoSsd from '@tensorflow-models/coco-ssd';
import '@tensorflow/tfjs';

class Detector extends Component {
  constructor(props) {
    super(props);

    this.state = {
      count: 0,
      list: ['person','laptop','scissors','mouse', 'spoon', 'keyboard',],
      isStopped: true,
    }
  } 
  videoRef = React.createRef();

  componentDidMount() {
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
      //getting camera permission code removed for readability
      const modelPromise = cocoSsd.load();
      Promise.all([modelPromise, webCamPromise])
        .then(values => {
          this.detectFrame(this.videoRef.current, values[0]);
        })
        .catch(error => {
          console.error(error);
        });
    }
  }

  detectFrame = (video, model) => {
    model.detect(video).then(predictions => {
      this.checkPredictions(predictions);
      requestAnimationFrame(() => {
        this.detectFrame(video, model);
      });
    });
  };

  checkPredictions = predictions => {
    predictions.forEach(prediction => {
      if(prediction.class === this.state.list[0]) {
        const tempL = this.state.list;
        const tempC = this.state.count + 1;
        tempL.shift();
        this.setState({list: tempL, count: tempC, isStopped: false});
      }
    });
  };

  render() {
    return (
      <div>
        //removed for readability
      </div>
    );
  }
}

export default Detector;

从“React”导入React；
从“react Lottie”导入Lottie；
从“@tensorflow models/coco ssd”导入*作为cocoSsd；
导入“@tensorflow/tfjs”；
类检测器扩展组件{
建造师（道具）{
超级（道具）；
此.state={
计数：0，
列表：[“人”、“笔记本电脑”、“剪刀”、“鼠标”、“勺子”、“键盘”等]，
是的，
}
} 
videoRef=React.createRef（）；
componentDidMount（）{
if（navigator.mediaDevices&&navigator.mediaDevices.getUserMedia）{
//正在删除相机权限代码以提高可读性
const modelPromise=cocoSsd.load（）；
Promise.all（[modelPromise，网络视频]）
。然后（值=>{
this.detectFrame（this.videoRef.current，值[0]）；
})
.catch（错误=>{
控制台错误（error）；
});
}
}
detectFrame=（视频，型号）=>{
model.detect（视频）。然后（预测=>{
检查预测（预测）；
requestAnimationFrame（（）=>{
此.detectFrame（视频、模型）；
});
});
};
检查预测=预测=>{
forEach（预测=>{
if（prediction.class==this.state.list[0]）{
const temp=this.state.list；
const tempC=this.state.count+1；
temp.shift（）；
this.setState（{list:temp，count:tempC，isStopped:false}）；
}
});
};
render（）{
返回(
//为了可读性而删除
);
}
}
输出默认检测器；

看起来

webpack

已经选择了

@tensorflow/tfjs

的字段（构建文件），以防出现问题的生产模式

但是我们可以手动指定这个字段，这里描述

要做到这一点，您只需切换到使用重新布线的

react应用程序

，我们就可以自定义

webpack

配置。以下是步骤：

• 安装

npm i-D反应应用程序重新布线

• 在根repo

  config overrides.js

  处创建覆盖配置文件，包含以下内容：

module.exports=函数覆盖（配置，环境）{
if（process.env.NODE_env===‘生产’）
{
config.resolve.mainFields=['main']；
}
返回配置；
}

• 通过替换

  react脚本

  命令，切换到使用重新布线的

  react应用程序脚本：

---

最后，您可以运行

npm build

，并提供构建内容来测试它。就这样

如何构建代码？以前我记得有一个问题与使用

target

和

es5

style:）的构建代码相同，我的意思是你在使用babel和webpack，以及如何配置它们？嗯。如果使用

react脚本

，除非您使用允许自定义配置的

react script wired

，否则它很难更改，因为它本身是包装和配置的。您的回购协议是否可访问？我曾尝试运行您的回购协议，但它工作正常。您使用的是哪个节点版本？我想我知道问题所在。我给你提了一个建议，它行得通！非常感谢你一直以来的帮助，我真的非常感谢你。如果有什么价值的话，我开了一个悬赏，你会在24小时内得到100分。谢谢你让我开心：）

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  // ...  
},