Почему в продакшн-версии react-приложения getElementById() может возращать null?

Question

[asakasinsky]

Почему в продакшн-версии react-приложения getElementById() может возращать null, в то время как querySelector отрабатывает корректно?

В простом примере всё ок. Внешний скрипт подгружается, getElementById и querySelector возвращают то, что нужно:
https://codepen.io/asakasinsky/pen/MEydXg

Но после сборки react-приложения я столкнулся со странным поведением:
getElementById начал возвращать null.

Появилась ошибка, проверив которую я и обнаружил что в ReactDOM.render передаётся null вместо элемента-контейнера приложения

ReactDOM.render(
        <AppContainer errorReporter={Redbox}>
            <Root store={store} history={history}/>
        </AppContainer>,
        document.getElementById('app')
    );

Для проверки в самом начале index.js, перед импортами, вызовом метода render() разместил следующий код:

document.addEventListener('DOMContentLoaded', function () {
    console.log('loaded');
    console.log('querySelector after load', document.querySelector('#app'));
    console.log('getElementById after load', document.getElementById('app'));
});

console.log('querySelector', document.querySelector('#app'));
console.log('getElementById', document.getElementById('app'));

Вывод консоли:


Как видно, поведение getElementById не зависит от события DOMContentLoaded
Ошибка «Cannot read property 'sidebarIsOpen' of undefined» возникает ровно по той же причине.

Думаю над этой интересной задачкой, и подозреваю, что виной тому какая-то из библиотек.
Может кто-то сталкивался с этим?

Answer 1

[asakasinsky]

Всё оказалось прозаичнее. Причиной послужил используемый в сборщике плагин gulp-rev-all. Ниже кусок кода из сборщика:

gulp.task('build:revAssets', ['css', 'moveAssets'], function () {
    var rev = $.revAll;
    return gulp.src('./public/assets/**/*')
        .pipe(rev.revision({
            fileNameManifest: 'manifest.json'
        }))
        .pipe(gulp.dest('./public/assets'))
        .pipe(rev.manifestFile())
        .pipe(gulp.dest('./public/assets'))
})

Теперь, результат сборки тестового файла (результат отформатирован для удобства):

! function(modules) {
    function __webpack_require__(moduleId) {
        if (installedModules[moduleId]) return installedModules[moduleId].exports;
        var module = installedModules[moduleId] = {
            i: moduleId,
            l: !1,
            exports: {}
        };
        return modules[moduleId].call(module.exports, module, module.exports, __webpack_require__), module.l = !0, module.exports
    }
    var installedModules = {};
    __webpack_require__.m = modules, __webpack_require__.c = installedModules, __webpack_require__.d = function(exports, name, getter) {
        __webpack_require__.o(exports, name) || Object.defineProperty(exports, name, {
            configurable: !1,
            enumerable: !0,
            get: getter
        })
    }, __webpack_require__.n = function(module) {
        var getter = module && module.__esModule ? function() {
            return module.default
        } : function() {
            return module
        };
        return __webpack_require__.d(getter, "a", getter), getter
    }, __webpack_require__.o = function(object, property) {
        return Object.prototype.hasOwnProperty.call(object, property)
    }, __webpack_require__.p = "/assets/", __webpack_require__(__webpack_require__.s = 0)
}


([function(module, exports, __webpack_require__) {
    module.exports = __webpack_require__(1)
}, function(module, exports, __webpack_require__) {
    "use strict";
    console.log("querySelector", document.querySelector("#app")), console.log("getElementById", document.getElementById("app.14b3524f"))
}]);

Обратите внимание на:

console.log("getElementById", document.getElementById("app.14b3524f"))

Как видно, «app» был сборщиком/плагином переименован в «app.14b3524f».

Вот и всё! Спасибо, тем, кто пытался помочь!

P.S. Поведение плагина описано тут

Answer 2

[Javid Asgarov]

В вашей ссылки JS кода нет, но я б предложил использовать ref (посмотрите документацию), а также поместить этот код в componentDidMount, один из lifecycle методов.

Comments

[asakasinsky]

Там много кода.

Проблема возникает в самом начале, где:

ReactDOM.render(
        <AppContainer errorReporter={Redbox}>
            <Root store={store} history={history}/>
        </AppContainer>,
        document.getElementById('app')
    );

[asakasinsky]

«В вашей ссылки JS кода нет» есть, он внешний, подгружается с rawgit.

[Javid Asgarov]

Ок, я вижу этот скрипт и в консоли оба метода возвращают DOM элемент. Какой-нибудь живой пример, воссоздать ошибку можете? Вместе с реактом.

Answer 3

[Ninja Mate]

Вы точно JS подключаете после div?

Comments

[asakasinsky]

Конечно.


Там в чём-то другом причина, смотрите после строчки «Для проверки в самом начале index.js, перед....», событие DOMContentLoaded срабатывает и всё равно getElementById возвращает null, несмотря на то, что дерево уже построено.

[Ninja Mate]

asakasinsky, используйте ref. медицина тут бессильна.

Answer 4

[Антон]

На скриншоте вижу аттрибут async. Поробуйте заменить на defer