Javascript 如何解决TypeError:jquery_uu网页包_u导入的_u模块_u1_uu_u默认值（…）（…）。faceDetection不是一个函数

我正在尝试使用人脸检测库。我已经在index.html中用script标记链接了它，并希望在我的profile_pic组件中使用该文件。在componentDidMount上，当我调用该函数时，它表示人脸检测不是一个函数。当我将同一个文件与简单javascript一起使用时，它成功运行。现在我如何将其与react一起使用

我从img标签获取图像，有一个文件输入控件，用于动态更改图像的值

这是我的渲染方法

 render() {

        return (
            <div
                style={{
                    marginTop: "20px",
                    display: "flex",
                    flexDirection: "column",
                    alignItems: "center"
                }}
            >
                {/* div for upload photo  starts*/}
                <div>
                    <input
                        accept="image/*"
                        type="file"
                        id="image_upload"
                        style={{ display: "none" }}
                        onChange={e => {
                            this.handle_image_upload(e);
                        }}
                    />
                    <label htmlFor="image_upload">
                        <img
                            id='picture'
                            src={this.state.image}
                            alt="Man or Woman"
                            style={{ width: "150px", height: "150px", cursor: "pointer" }}
                        />
                    </label>
                </div>

            </div>
        );
    }

这是人脸检测功能

 face_detection=()=>{
        console.log($('#picture'))
        $('#picture').faceDetection({
                complete: function (faces) {
                        if (faces.length > 0) {
                                console.log('There is a face in this image')
            }
        }
    });
}

---

我已经成功地使用了同一个库，没有任何反应。现在如何解决此错误？

似乎没有定义提供“faceDetection（）”函数的库。相关库应在“

webpack.config.js

”中定义，或使用

'import'

或

'require'

在项目的一个js文件中定义。例如，下一行在React组件中导入“myLibrary”（位于“libraries”目录中）：

import * as myLibrary from '../libraries/myLibrary';

现在，“faceDetection（）”可以这样使用：

myLibrary.faceDetection(...);

---

为什么要将其添加为脚本标记，而不是将其捆绑在网页包中？您的导入看起来像什么？import语句只从jQuery导入$，从react导入react。是否还有其他文件需要导入？如果我直接在我想要使用函数的组件中导入它，它会给出很多错误，上面写着“期望赋值或函数调用，而不是看到表达式”。它表明这些错误源于库文件，该库文件应位于何处？目前，我在一个名为face_detection的文件夹中拥有这个库，该文件夹与src文件夹位于同一目录中。我应该把它移到别的地方吗？不，只是把库的相对地址放在“import”语句中。例如，如果您的React组件位于“src”的根目录中，则您的相对地址将为“/face_detection/.js”。使用$（“#picture”）调用face_detection。我如何使用导入的对象执行此操作？我无法导入库，因为库文件位于公用文件夹中。任何导入它们的尝试都会导致“不支持src/之外的相对导入”。在这种情况下，我应该将文件移动到哪里？您可以尝试将“face_detection”目录移动到“src”目录中吗？（在网页包配置中包含外部js还有其他更复杂的方法。请参阅：）

myLibrary.faceDetection(...);