binggle's avatar

how to use LiveReload ?

I followed this

https://laravel-mix.com/docs/6.0/livereload

npm install webpack-livereload-plugin@1 --save-dev

and my webpack.mix.js is following.

const mix = require('laravel-mix');
var LiveReloadPlugin = require('webpack-livereload-plugin');

mix.js('resources/js/app.js', 'public/js').postCss('resources/css/app.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
]);

mix.webpackConfig({
    plugins: [new LiveReloadPlugin()]
});

when I execute ' npm run watch' , it caused error .

[webpack-cli] TypeError: compiler.plugin is not a function at LiveReloadPlugin.apply ......

How can I use livereload Plugin ?

0 likes
8 replies
binggle's avatar

That is good option.

So I tried.

installed

npm install -g browser-sync

modified json file

"files": ["resources/views/**","app/**","public/**"],
    ;
"socket": {
    "domain": 'localhost:3000' 
    ;
},

Version was updated. so I changed version to 2.26.4.

in app.blade.php

@env('local')
    <script async src='https://myproject.test/browser-sync/browser-sync-client.js?v=2.26.4'></script>
@endif

run code.

it shows in console

[Browsersync] Access URLs:
 ----------------------------------
          UI: http://localhost:3001
 ----------------------------------
 UI External: http://localhost:3001
 ----------------------------------

visited my page and it shows error on dev console.

GET https://myproject.test/browser-sync/browser-sync-client.js?v=2.26.4 net::ERR_ABORTED 404

I edited blade.php source for checking

It shows good.

[Browsersync] Watching files...

I tried these.

1) "domain": 'localhost:3000'  => "domain": 'myproject.test' , ==>  same error shows.

2) I installed browser-sync locally and repeated the above steps. ==> same error shows.
3) cleared browser cache and reloaded ==> same error shows.
4) php artisan cache:clear && view:clear ==> same error shows.

Every trial give me same error.

GET https://myproject.test/browser-sync/browser-sync-client.js?v=2.26.4 net::ERR_ABORTED 404

No good results

Could you help me ?

Snapey's avatar

this script path just needs to point to the browsersync code

are you serving your project locally over https? have you the correct url?
binggle's avatar

Thanks for comment and sorry for lated reply.

I fixed with this.

  • npm browser-sync installed locally.
  • "domain": 'localhost:3000',
  • when I run 'browser-sync start --config bs-config.js' , there is snippet to copy. I just copied that code.
<script id="__bs_script__">//<![CDATA[
    document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.js?v=2.26.14'><\/script>".replace("HOST", location.hostname));
//]]></script>

I don't totally understand what the problem was.

Anyway I could fix.

Thanks !!

davekaplan's avatar

I'm getting the exact same error @binggle. I've used webpack before outside of Laravel, but I was no expert and it's been a while.

Laravel and mix are new to me, but I did find that if I use the LiveReload the way I would for a webpack config it works. I'm running LiveReload on my mac with the Chrome browser extension. It works but it's not that fast.

(I'm looking to not hit refresh so much, like the c/p on the keyboard ;-p )

const LiveReloadPlugin = require('webpack-livereload-plugin');

module.exports = {
    plugins: [
        new LiveReloadPlugin()
    ]
}

It would be great if anyone could explain why this works and the documentation Mix version does not.

"laravel/framework": "^8.40",
"laravel-mix": "^6.0.6",
 webpack --version
 webpack 5.39.1
 webpack-cli 4.7.2
 webpack-dev-server 4.0.0-beta.2
ranjeetweb's avatar

uninstall old and run "npm i webpack-livereload-plugin"

Please or to participate in this conversation.