Реагируйте: Сценарий 'Не удалось скомпилировать' с помощью componentDidMount()

Question

Настроить

Я загрузил библиотеку Vanilla JS lightgallery.js через NPM и 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;