Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

HMR Failed to execute 'open' on WIndwos 10 - Mix 0.8.8 #507

Closed
dobromir-hristov opened this issue Mar 2, 2017 · 4 comments

Comments

@dobromir-hristov
Copy link
Contributor

commented Mar 2, 2017

  • 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.

@dobromir-hristov

This comment has been minimized.

Copy link
Contributor Author

commented Mar 2, 2017

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 #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.

@SeoFood

This comment has been minimized.

Copy link
Contributor

commented Mar 27, 2017

yep same for me on the mac.

image

SeoFood added a commit to SeoFood/laravel-mix that referenced this issue Mar 27, 2017

@acidjazz

This comment has been minimized.

Copy link

commented Mar 28, 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' : ''
        };
    }
@SeoFood

This comment has been minimized.

Copy link
Contributor

commented Mar 28, 2017

Yeah I already submitted a PR
#624

@JeffreyWay JeffreyWay closed this Mar 28, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.