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

    asakasinsky
    @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. Поведение плагина описано тут
    Ответ написан
    Комментировать