Laravel-mix: HMR Failed to execute 'open' on WIndwos 10 - Mix 0.8.8

Created on 2 Mar 2017 · 4Comments · Source: JeffreyWay/laravel-mix

Laravel Mix Version: 0.8.8
Node Version (node -v): 6.9.1
NPM Version (npm -v): 4.0.5
OS: Windows 10

Description:

When I run npm run hot all runs fine until I update a vue component. Then I get an error

[HMR] Update failed: Error: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL
    at XMLHttpRequest.open (http://localhost:3000/_debugbar/assets/javascript?v=1487955146:1150:25)
    at http://localhost:8080/js/app.js:28:22
    at hotDownloadManifest (http://localhost:8080/js/app.js:22:19)
    at Object.hotCheck [as check] (http://localhost:8080/js/app.js:224:19)
    at check (http://localhost:8080/js/app.js:13901:14)
    at EventEmitter.<anonymous> (http://localhost:8080/js/app.js:13935:4)
    at EventEmitter.emit (http://localhost:8080/js/app.js:15101:17)
    at reloadApp (http://localhost:8080/js/app.js:13873:14)
    at Object.ok (http://localhost:8080/js/app.js:13802:3)
    at SockJS.sock.onmessage (http://localhost:8080/js/app.js:26879:22)

Package.json

{
  "private": true,
  "scripts": {
    "dev": "webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js -p"
  },
  "devDependencies": {
    "axios": "^0.15.3",
    "jquery": "^3.1.1",
    "laravel-mix": "git+https://github.com/JeffreyWay/laravel-mix.git",
    "lodash": "^4.17.4",
    "vue": "^2.1.10",
    "vue-resource": "^1.2.0"
  },
  "dependencies": {
    "animate-sass": "^0.6.6",
    "foundation-sites": "^6.3.0",
    "headroom.js": "^0.9.3",
    "sass-burger": "^1.3.1",
    "slick-carousel": "^1.6.0",
    "toastr": "^2.1.2",
    "vue-i18n": "^5.0.3"
  }
}

wepback.mix.js

mix.js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .combine(foundationScripts, 'public/js/foundation.js')
    .webpackConfig({
        externals: {
            jquery: 'jQuery'
        }
    })
    .browserSync({
        proxy: 'gumi.laravel',
        open: false,
        files: [
            'public/css/**/*.css' //only way I got scss to not reload the entire page...
        ]
    });

Steps To Reproduce:

Updated today to 0.8.8 version of Mix, before didnt have this problem.
Basically now HMR doesnt work, everything else compiles properly.

Source

dobromir-hristov

Most helpful comment

After debugging, I found that it was appending "http://localhost:8080bbb16ed2f5ff4cef1078.hot-update.json" to hotDownloadManifest method request.open
I guess its missing a slash there.
So it seems to be related to https://github.com/JeffreyWay/laravel-mix/pull/209
I tried adding a slash to the public path at line:116 on Mix.js -> publicPath: this.hmr ? 'http://localhost:8080/' : ''
and it fixed it for me.
I know I should never edit like that, and I will revert it, but just decided to try.

dobromir-hristov on 2 Mar 2017

👍4 ❤1

All 4 comments

dobromir-hristov on 2 Mar 2017

👍4 ❤1

yep same for me on the mac.

SeoFood on 27 Mar 2017

I was able to fix this by changing publicPath here and adding a slash

    /**
     * Determine the Webpack output path.
     */
    output() {
        let filename = this.options.versioning ? '[name].[chunkhash].js' : '[name].js';
        let chunkFilename = path.join(
            this.js.base || '', (this.options.versioning ? '[name].[chunkhash].js' : '[name].js')
        );

        return {
            path: path.resolve(this.options.hmr ? '/' : this.options.publicPath),
            filename: filename,
            chunkFilename: chunkFilename.replace(/^\//, ''),
            publicPath: this.options.hmr ? 'http://localhost:8080/' : ''
            //publicPath: this.options.hmr ? 'http://localhost:8080' : ''
        };
    }