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

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]

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 5
  • Comments: 16 (1 by maintainers)

Most upvoted comments

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

my workaround:

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

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 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?

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.