TypeError: Cannot call a class as a function after deploying to Netlify?

Question

您好，我正在尝试将 Web 应用程序部署到 Netlify。它在前端使用COCO SSD模型进行对象识别，这是有目的的。 Web 应用程序在本地主机上运行良好，但是一旦我部署到 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)

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

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;

Answer 1

看起来 webpack 在生产模式的情况下选择了 @tensorflow/tfjs 的字段（构建文件）。

但是我们可以手动指定这里描述的这个字段https://webpack.js.org/configuration/resolve/#resolvemainfields

为此，您只需切换到使用 react-app-rewired，我们可以在其中自定义 webpack 配置。以下是步骤：

安装

npm i -D react-app-rewired

在根存储库 config-overrides.js 中创建覆盖配置文件，内容如下：

module.exports = function override(config, env) {
  if (process.env.NODE_ENV === 'production')
  {
    config.resolve.mainFields = ['main'];
  }
  return config;
}

通过替换 react-scripts 命令切换到使用 react-app-rewired 脚本：

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

最后，您可以运行 npm build 并提供您构建的内容以对其进行测试。就是这样！

TypeError: Cannot call a class as a function after deploying to Netlify?

TypeError: Cannot call a class as a function after deploying to Netlify?

javascript

reactjs

tensorflow

netlify