Laravel-mix: laravel 5.6 vue HMR not working windows 7 vs code

[paul-byford]

• Laravel Mix Version: 2.1.11
• Node Version : 8.9.3
• NPM Version : 5.6
• OS: Windows 7

Description:

I'm having a problem running HMR with a laravel and vue project on windows and vs code. this is the first time i've attempted to use it.

The symptoms I have seem to be the similar to this issue. i tried the fix descrpbide there but it did not work https://github.com/JeffreyWay/laravel-mix/issues/599

when I visit http://localhost:8080/ or http://localhost:8080/js/app.js I get message: Cannot get / or Cannot get /js/app.js.

Steps To Reproduce:

1. using vs code on windows 7 and the vs code terminal
2. create new laravel project - laravel new blog
3. npm install
4. create a basic blade page with a vue component
5. edit script tag to point to
6. npm run hot
   which produces this
   
7. php artisan serve
   which produces this
   
8. load page in a browser by clicking the php artisan serve link - which loads the page fine
9. edit vue component in vs code and save - this triggers the 'build successful' notification
10. relook in browser to check if hmr updated with the edit page - this fails
11. click refresh in browser to check if page has updated with edit - this fails

if i use npm run watch ( instead of npm run hot ) and hard code the src to my js file my development workflow is as expected - the watch recompiles after a file change and when i refresh in browser i see the edit as expected

-->

[r15ch13]

I'm currently having the same problem. Windows 10, VSCode terminal and cmder, while using laravel-boilerplate.

Same steps as @paul-byford with same results.
npm run watch works, npm run hot does not.

[DarkGhostHunter]

Did you try the fixes in #1437 ?

[paul-byford]

no, unfortunately the 1437 fixes don't resolve it

[ikhsanuddin]

Unfortunately, i had this issue since laravel-mix 0.8.^
And update to laravel-mix 2.1.^, still had same issue .

Cannot get / or Cannot get /js/app.js. easily fixed by add this code into your webpack.config.js

mix.webpackConfig({
  devServer: { contentBase: [ path.resolve(__dirname, 'public') ], },
})

some issue found,
when compiling, the mix status compiled successful, as mentioned by @paul-byford
but the result not Hot Reloaded to the app.js file.
As the result the laravel-mix add *.hot-update.json manifest in my public folder

My devServer running on localhost:8080
Php server runing on localhost:8000

All compiled asset had been included using {{ mix(assets/js/app.js) }} and so on..

what i found was, there's no [HMR] connected to my project (localhost:8000)

i have add webpack.HotModuleReplacementPlugin(); on webpack.config.js but the issue still the same, no HMR connected

[gonzaloner]

I solved it by applying the following fix: https://github.com/JeffreyWay/laravel-mix/issues/1483#issuecomment-366685986

[FrancoisH]

The fix in #1483 did help only partially.

If you use .extract and import the manifest.js, vendor.js, and app.js, it's not working. If I disable the extract, it's working.

[ikhsanuddin]

@FrancoisH , yup the .extract still not work on HMR.
So, i use extract only when not on hot process.env.npm_lifecycle_event !== 'hot'.

[itsmill3rtime]

i just use "laravel-mix": "^1.7.2", in all my projects. i hate not being able to use the latest version of things and it is amazing how long this issue has existed and still not been fixed

[spaceemotion]

So I have been investigating this for the past couple days as no solution worked quite right (not even the one in #1483 and the helpful tip for extract() by @FrancoisH.

• If you do anything using paths, use path.resolve() - sounds stupid, but we've had a couple sections where this wasn't being used.
• Use the WSL (subsystem for Linux) instead of relying on cmd or even the git bash. This might be a bigger step for some, but I just have had too many issues with it.

Here are the steps I had to take to get hot-reload working:

1. Activate the WSL functionality and install Ubuntu through the Windows Store
2. Run vagrant in the Windows Host System (as WSL does not support fuse, which vagrant for ubuntu requires)
3. Install node using nvm in Ubuntu (it will use the windows version of yarn but let it run through the Ubuntu-Node.js installation).
4. Reinstall your packages through Ubuntu/WSL (it will install the unix versions this time)
5. Run hot in your Ubuntu bash.

Performance might decrease a bit as WSL is known for its slow IO, but at least there are not config changes to be made. Let's hope somebody can figure out a proper fix that works natively on windows :/

[itsmill3rtime]

@spaceemotion for my windows projects on Laravel 5.6/5.7 i set my mix to "laravel-mix": "^1.7.2" and then make my webpack.mix.js in the root of my laravel installation this:

let mix = require('laravel-mix');

if (process.env.NODE_ENV == 'production') {
    mix.js('resources/js/app.js', 'public/js')
        .webpackConfig({
            output: {chunkFilename: 'js/chunks/[name].[chunkhash].js', publicPath: '/'}
        })
        .sass('resources/sass/app.scss', 'public/css')
        .options({
            extractVueStyles: true
        })
        .version();
} else {
    mix.js('resources/js/app.js', 'js')
        .webpackConfig({
            devServer: {
                publicPath: "/",
                compress: true,
                hot: true,
                inline: true
            }
        })
        .sass('resources/sass/app.scss', 'public/css')
        .options({
            extractVueStyles: true
        })
        .sourceMaps()
        .disableNotifications();
}

• Example is for 5.7.... IF on 5.6 then resources/assets/js/app.js instead *

then in my page i add:

<script src="{{ mix('js/app.js') }}"></script> 
<link rel="stylesheet" href="{{ mix('css/app.css') }}">

should fix your issue. i've used it across multiple laravel installations and multiple pcs with no issue. There is 0 need for Ubuntu bash.

[spaceemotion]

@itsmill3rtime thanks for the tips. For some reason the whole compilation process seems to befaster in Ubuntu than natively on windows, so i guess it wasn't for nothing...

Have you tried your approach with the extract() method though? Would love to see if it works then as well, cheers!

[itsmill3rtime]

@spaceemotion i have and it did work, i'm just not using it in that example.

I've never had the stock mix file work for HMR in any version really and most likely because of windows. But ever since i started using this mix file i worked up i've had no issues.

[agm1984]

Mine was broken out of the box with Laravel 5.6, Laravel Mix 2.1, and Vue 2.5.17.

I will show my files real quick for context, and then I will show my solution.

note: this is Mac OS.

npm script (untouched):

"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",

Laravel mix config (we are using Tailwind, sass is installed too but we arent using it):

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .postCss('resources/assets/css/main.css', 'public/css', [
        tailwindcss('./tailwind.js'),
    ]);

Now, here's what I did to make HMR work. I noticed when I ran npm run hot that it fired up smoothly, and when I saved a file, it would say "Laravel Mix: build successful", but nothing on the page changed.

I was reading this article here (https://medium.com/sureshvel/enabling-hot-module-replacement-hmr-laravel-5-5-vuejs-mix-webpack-fire-up-development-d58063945e37) and noticed mention of mix('js/app.js'). My project was only using asset('js/app.js'). This refers to your JavaScript bundle that is in your main layout file(s). Mine was like this:

        <script src="{{ asset('js/app.js') }}"></script>
    </body>
</html>

Literally as soon as I changed asset to mix, HMR started working after I reloaded the bundle manually once.

The only problem is that this isn't acceptable for production environment, so you can't just "leave it".

So I did this:

1) Go into .env file and set APP_ENV to development

2) Change bundle script to this:

<script src="{{ (env('APP_ENV') === 'development') ? mix('js/app.js') : asset('js/app.js') }}"></script>

Boom done. now npm run hot works as expected without side effects.

[rathax]

still the same issue on windows 10 with laravel mix 4.0.13. fix #1483 (comment) didn't work for me after upgrading to laravel-mix 4 and gave me an Invalid Host/Origin Header error inside the console. I fixed it by disabling the host check of the webpack dev server:

Mix.listen('configReady', (webpackConfig) => {
    webpackConfig.devServer.disableHostCheck = true;
    if (Mix.isUsing('hmr')) {
        // Remove leading '/' from entry keys
        webpackConfig.entry = Object.keys(webpackConfig.entry).reduce((entries, entry) => {
            entries[entry.replace(/^\//, '')] = webpackConfig.entry[entry];
            return entries;
        }, {});

        // Remove leading '/' from ExtractTextPlugin instances
        webpackConfig.plugins.forEach((plugin) => {
            if (plugin.constructor.name === 'ExtractTextPlugin') {
                plugin.filename = plugin.filename.replace(/^\//, '');
            }
        });
    }
});

[jhoopes]

I'm also getting this error, albeit because i'm not using localhost as for some reason localhost doesn't translate down to 127.0.0.1, but after setting my host to 127.0.0.1 I now get the Invalid Host/Origin Header. I'm just running a normal laravel 5 app with Vue and just updated to mix 4 on macOS 14.2 with node 10.13, whereas the webpack-dev-server that came with mix 2 was working with just setting the host and port in the mix options.

Disabling the host check does fix this, and the solution from @drunklol odes work, the other option is to add the disable host check flag to your npm package.json script line.

"hot": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js --disableHostCheck=true",

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.