React：使用componentDidMount（）脚本“无法编译”

Question

设置

我已经通过NPM加载了Vanilla JS库lightgallery.js，并像往常一样importing。

问题

我正在通过componentDidMount()初始化此库，但是由于'lightGallery' is not defined导致编译失败。 请参见下面的示例

我通过删除componentDidMount()并通过Chrome控制台对其进行了初始化，从而验证了库正在导入。当我这样做时，它会按预期工作。

当我未使用'lightGallery' is not defined初始化导入时，如果导入明显起作用，我不清楚为什么会导致componentDidMount()。我猜这可能是由于元素DOM不在加载中而存在的问题，还是因为我的import的设置方式有问题。

任何帮助将不胜感激。

当前页面

这是我的安装程序的精简版，其中的图库元素经过硬编码，以方便说明。

import React, { Component } from 'react';
import 'lightgallery.js';

class Gallery extends Component {

    componentDidMount() {
        lightGallery(document.getElementById('lightgallery'));
    }

    render() {

        return (
            <>
                <section>
                    <h1>Gallery</h1>
                </section>
                <section>
                    <div id="lightgallery">
                        <a href="img/img1.jpg">
                            <img src="img/thumb1.jpg" />
                        </a>
                        <a href="img/img2.jpg">
                            <img src="img/thumb2.jpg" />
                        </a>
                        <a href="img/img3.jpg">
                            <img src="img/thumb3.jpg" />
                        </a>
                    </div>
                </section>
            </>
        ); 
    }
}

export default Gallery;