CODEWITHSUNDEEP
javascriptgoogle-chromevue.jsfirefoxwebpack
Roy Richard Flores Gonzalez
Roy Richard Flores Gonzalez

Reputation: 45

Vue.js App showing fine in Chrome, but shows blank page in Firefox - __webpack_require__ error

I have created a new Vue.js app with: vue create App_name i start the app and runs fine, when i open it in Chrome it shows just fine, but when i open it in any Firefox browser it just shows a blank page and when checking the console it shows:

Uncaught ReferenceError: __webpack_require__ is not defined
    <anonymous> dev-server.js:12
    eval person:59
    js chunk-vendors.js:9714
    __webpack_require__ app.js:854
    fn app.js:151
    1 app.js:1312
    __webpack_require__ app.js:854
    checkDeferredModules app.js:46
    <anonymous> app.js:994
    <anonymous> app.js:997

in the debugger it shows the line of code that is causing the error from this file dev-server.js:

var log = __webpack_require__(/*! ./log */ "./node_modules/webpack/hot/log.js");

Complete dev-server.js file

if (true) {
    var lastHash;
    var upToDate = function upToDate() {
        return lastHash.indexOf(__webpack_require__.h()) >= 0;
    };
    var log = __webpack_require__(/*! ./log */ "./node_modules/webpack/hot/log.js");
    var check = function check() {
        module.hot
            .check(true)
            .then(function(updatedModules) {
                if (!updatedModules) {
                    log("warning", "[HMR] Cannot find update. Need to do a full reload!");
                    log(
                        "warning",
                        "[HMR] (Probably because of restarting the webpack-dev-server)"
                    );
                    window.location.reload();
                    return;
                }

                if (!upToDate()) {
                    check();
                }

                __webpack_require__(/*! ./log-apply-result */ "./node_modules/webpack/hot/log-apply-result.js")(updatedModules, updatedModules);

                if (upToDate()) {
                    log("info", "[HMR] App is up to date.");
                }
            })
            .catch(function(err) {
                var status = module.hot.status();
                if (["abort", "fail"].indexOf(status) >= 0) {
                    log(
                        "warning",
                        "[HMR] Cannot apply update. Need to do a full reload!"
                    );
                    log("warning", "[HMR] " + log.formatError(err));
                    window.location.reload();
                } else {
                    log("warning", "[HMR] Update failed: " + log.formatError(err));
                }
            });
    };
    var hotEmitter = __webpack_require__(/*! ./emitter */ "./node_modules/webpack/hot/emitter.js");
    hotEmitter.on("webpackHotUpdate", function(currentHash) {
        lastHash = currentHash;
        if (!upToDate() && module.hot.status() === "idle") {
            log("info", "[HMR] Checking for updates on the server...");
            check();
        }
    });
    log("info", "[HMR] Waiting for update signal from WDS...");
} else {}

Does anybody know why?, i'm new to Vue.js and this is driving me crazy, sorry if it is a repo of some kind, but i've been looking for days and can't find a solution. thanks

package.json file

{
  "name": "App_name",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "axios": "^0.19.2",
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^8.4.2",
    "vue-router": "^3.2.0",
    "vuetify": "^2.2.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.4.0",
    "@vue/cli-plugin-router": "~4.4.0",
    "@vue/cli-plugin-typescript": "~4.4.0",
    "@vue/cli-service": "~4.4.0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3",
    "vue-cli-plugin-vuetify": "~2.0.7",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.3.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

Upvotes: 0

Views: 1538

Answers (2)

Work
Work

Reputation: 56

nope, found the problem, it was an addon which I was using called 'anti-antiblocker blocker', when I installed it in a new firefox, vue stopped working.

try to restart your firefox without any kind of addon and see if it works for you.

Upvotes: 2

Work
Work

Reputation: 56

I had the same problem...

Here is what I did which fixed it.

I downloaded the 64bit version of firefox(I until then was using a 32bit version in my 64bit OS)... and set it to run on English instead of my native language.

It began to run smoothly and without a problem on the new Firefox while continued to be blank in the old one.

I do not know what was causing the problem, but I think it was or a problem with language, or the version of Firefox... as both firefoxes are the same everything (mostly), one is just in brazilian portuguese and in 32-bits (which made vue not work) while the other is in english and in 64-bits (which made vue work).

Upvotes: 1

Related Questions