Laravel-mix: HRM is conflicting with mix.version()

[jpmurray]

If anyone can help me figure out this, I have to be honest, I usually try to give more details and possible outcome, but I'm not knowledgable in node stuff so... :/

Anyway. Running npm run dev, npm run production, npm run watch works without a glitch. But running it for hmr results in this:

 ERROR  Failed to compile with 1 errors

 error  in /js/[name].[chunkhash].js

Cannot use [chunkhash] for chunk in '/js/[name].[chunkhash].js' (use [hash] instead)

And this happens after compiling my SASS assets:

[156] (webpack)/hot/emitter.js 77 bytes {0} [built]
  [157] ./resources/assets/js/app.js 801 bytes {0} [built]
  [158] ./resources/assets/sass/app.scss 41 bytes {0} [built]
  [159] ./~/sweetalert2/src/sweetalert2.scss 41 bytes {0} [built]
  [160] (webpack)-dev-server/client?http://localhost:8080 4.66 kB {0} [built]
  [161] (webpack)/hot/dev-server.js 1.57 kB {0} [built]
  [191] ./resources/assets/js/bootstrap.js 1.52 kB {0} [built]
  [192] ./resources/assets/js/components.js 1.12 kB {0} [built]
  [193] ./resources/assets/js/events/events.js 320 bytes {0} [built]
  [197] ./resources/assets/js/vendor.js 156 bytes {0} [built]
  [239] ./~/strip-ansi/index.js 161 bytes {0} [built]
  [242] ./~/url/url.js 23.3 kB {0} [built]
  [267] (webpack)-dev-server/client/socket.js 856 bytes {0} [built]
  [269] (webpack)/hot/log-apply-result.js 1.02 kB {0} [built]
  [270] multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./resources/assets/js/app.js ./resources/assets/sass/app.scss ./~/sweetalert2/src/sweetalert2.scss 76 bytes {0} [built]
     + 256 hidden modules

ERROR in chunk app [entry]
/js/[name].[chunkhash].js
Cannot use [chunkhash] for chunk in '/js/[name].[chunkhash].js' (use [hash] instead)
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 698 kB [entry] [rendered]
        [0] ./~/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot 92 bytes {0} [built]
        [1] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
        [2] ./~/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.svg 92 bytes {0} [built]
        [3] ./~/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.ttf 92 bytes {0} [built]
        [4] ./~/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff 93 bytes {0} [built]
        [5] ./~/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff2 94 bytes {0} [built]
        [6] ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader?sourceMap!./resources/assets/sass/app.scss 696 kB {0} [built]
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 56.8 kB [entry] [rendered]
        [0] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
        [1] ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader?sourceMap!./~/sweetalert2/src/sweetalert2.scss 55.3 kB {0} [built]

[jpmurray]

Here is the content of my webpack.mix.js.

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

/*
 |--------------------------------------------------------------------------
 | 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 your application, as well as bundling up your JS files.
 |
 */

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

[jpmurray]

And, yeah, using Mix 0.5.0, on Laravel 5.4 install.

[kenvunz]

same issue, i think the culprit is the .version() bit, which append the output with .[chunkhash]

my workaround:

if(mix.config.inProduction) mix.version();

[gpopoteur]

same here, for now it seems that npm run watch would do until fixed. It doesn't hot reload, but it lets you work.

[jpmurray]

@kenvunz good thinking with the chunk part! I'll check this out tonight, but that's definitely the problem, yes.

[jpmurray]

Confirming, @kenvunz's solution makes it all go away.

Not closing the issue, as it could help others and there might be something to do in the version method to detect the environment?

[jpmurray]

Careful though, if you did ran a mixversion() before, the mix() method in Laravel will still try to find the manifest, so make sure you do a npm run dev so it resets everything to the correct names.

[rderimay]

Same problème here. Is there something to start on browser side to get hot reload working ? As far as I know, no...

[jpmurray]

@rderimay if you have the same problem, look at what @kenvunz said. It solved the problem. It's quick fix, I guess there should be something in laravel-mix to guard against it, but for now it works.

Aa far as HMR goes, you still have to use http://localhost:8080 as your domain for service your assets, or use Laravel's mix() helper method. More info in the docs.

[rderimay]

@jpmurray now it's working thanks.
I'm running into another error apparently related to JS 2015 conversion as I understand. If someone know how to solve it, probably a config problem ?
````
ERROR in ./~/babel-loader/lib?{"cacheDirectory":true,"presets":[["es2015",{"modules":false}]]}!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/Sidebar.vue
Module build failed: SyntaxError: Unexpected token (39:2)

37 |
38 | computed: {

39 | ...mapGetters([
| ^
40 | ])
41 | },
````

[jpmurray]

@rderimay seems related to .sourceMaps(), but probably an entire problem else, you should try on its own issue,

[jbreuer95]

@rderimay
npm install --save-dev babel-plugin-transform-object-rest-spread
then create a .babelrc in the root of your project with the following:

{
  "presets": ["es2015"],
  "plugins": ["transform-object-rest-spread"]
}

[rebers]

Yeah I'm not sure why this was closed. This should definitely be tackled. While it isn't a big deal to figure this out for experienced developers, Laravel Mix and Laravel itself is very much targeting beginners.

[vedmant]

Yeah, I just faced the same issue and spend like 20 minutes searching for solution. I think something have to be done about this.

[iraklisg]

@vedmant AFAIK the current solution for using HMR during development is, basically, to not include the mix.version() statement(s) in the webpack.mix.js file (please have a look at the solution provided by @kenvunz).

IMHO this issue has not been sufficiently addressed since it still causes a lot of confusion. @JeffreyWay
a look into the docs and I couldn't find a note about _HMR conflicting with .version()_ (here or here or here). Wouldn't be helpful to add something there?

[ajcastro]

mix.version() should not really be called when using HMR, since it may be impossible to change js file injected to the browser if its filename will be changed. lol