2

I pulled down this starter kit for Laravel/React project I'm playing about with. I'm finding that hot reloading doesn't work like it does with Vue.js. This is my script (I'm running npm run hot)

"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": "npm run development -- --watch",
    "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",
    "analyze": "source-map-explorer 'public/js/*.js'"
},

And this is my webpack:

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

require('laravel-mix-tailwind');
require('laravel-mix-purgecss');

mix.react('resources/js/app.js', 'public/js')
  .sass('resources/sass/app.scss', 'public/css')
  .purgeCss()
  .tailwind('tailwind.config.js')
  .webpackConfig({
    externals: [
      'child_process'
    ],
    node: {
      fs: 'empty'
    }
  }).sourceMaps();

What do I need to add to my webpack so make is so that saving my React files automatically update the page as I'm looking at it? I've tried various different solutions but nothing is working.

Surely it is possible?

James Stewart
  • 869
  • 12
  • 33
  • "npn run watch" should check for your changes and then hot reload – catJam Apr 09 '21 at 17:11
  • 1
    Yeah that doesn't happen unfortunately. In fact, when I terminate npm run watch and refresh the content, it still shows me the React code, so it'd like Webpack is building/pointing to the wrong location? – James Stewart Apr 09 '21 at 17:13

1 Answers1

1

Currently Laravel 8.x:

npm run hot

Maybe laravel will add some packages, you'll see a weird screen error, run again and works!

If hot not exists on package.json just include it at scripts section:

"hot": "mix watch --hot"
Aloiso Gomes
  • 640
  • 6
  • 12