Search code examples
laravellaravel-5webpackvue.jswebpack-hmr

Laravel 5 Vue hot module replacement (HMR)

My Vue HOT MODULE REPLACEMENT (HMR) not working. What I have and what I do:

  • local server on http:\db7\ on port 80 on Windows 10 (xampp with php 7.2.6)
  • laravel latest version with composer install and npm install
  • next package.json: { "private": true, "scripts": { "dev": "npm run development", "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch-poll": "npm run watch -- --watch-poll", "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", "prod": "npm run production", "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "live": "cross-env NODE_ENV=development webpack-dev-server --open --hot" }, "devDependencies": { "axios": "^0.18", "bootstrap": "^4.1.1", "cross-env": "^5.2.0", "jquery": "^3.2", "laravel-mix": "^2.0", "lodash": "^4.17.10", "popper.js": "^1.14.3", "vue": "^2.5.7" }, "dependencies": { "ajv": "^6.5.1", "bootstrap-datepicker": "^1.8.0", "js-cookie": "^2.2.0", "moment": "^2.22.2", "vue-flatpickr-component": "^7.0.4", "vue-router": "^3.0.1", "vue-snotify": "^3.1.0", "vuex": "^3.0.1" } }
  • in laravel template (blade) I have <script src="{{ mix('js/app.js') }}"></script> and when I opening page and look page code I see <script src="//localhost:8080//js/app.js"></script>. When npm run hot I can see my js if open localhost:8080//js/app.js manualy from browser. I'm try write url manualy in template too - <script src="http://localhost:8080/js/bundle.js"></script>. The same result.
  • When npm run hot NOT runing netstat -ano | findstr 8080 in cmd clear - so, the 8080 port is not using. When npm run hotis runing - 8080 is LISTENING.
  • When I run npm run hot and reload page with appliccation in console no any messages like "HMR is running" and e.t.c.
  • When I do any changes in my Vue components I see, that "Compiled successfully" in my PHPStorm console, but in browser no any changes. And more - there are no any changes, if I reload page with ctrl+f5 or open page in chrome incognito mode. There are no any changes in app.js if I reopen localhost:8080//js/app.js in browser manualy too.

  • My webpack.mix.js in laravel root folder:

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

    mix.js('resources/assets/js/app.js', 'public/js') .sass('resources/assets/sass/app.scss', 'public/css');

Step by step:

  1. Install fresh laravel composer create-project --prefer-dist laravel/laravel blog
  2. npm i
  3. npm run dev
  4. Open resources\views\welcome.blade.php remove all between <body></body> and add next (see on the bottom)
  5. Check in chrome http://blog/public/. I can see 'Example Component'.
  6. Open chrome DevTools on page and open console in it.
  7. In cmd on project folder run npm run hot and wait for compiling
  8. Hard reload page on chrome (ctrl+f5). In console I see only next. No HRM.
  9. Try to change vue component. In resources\assets\js\components\ExampleComponent.vue add any symbol to html code in template and check chrome page - no any chages. Hard reload page - no any changes!
  10. I do not do more than described above

Code for #4

<div id="app">
    <example-component></example-component>
</div>
<script src="{{ mix('js/app.js') }}"></script>

Help my please!

Solution

  • It seems the hot module replacement functionality is currently bugged. This is a temporary workaround but this does not solve issues like CSS reloading:

    https://github.com/JeffreyWay/laravel-mix/issues/1483#issuecomment-366685986

    We will have to wait for a proper fix.