Laravel-mix: "Cannot GET /js/app.js" in HMR Mode

[nkrh]

• Laravel Mix Version: 2.0.0
• Node Version (node -v): 8.9.4
• NPM Version (npm -v): 5.6.0
• Laravel Version: 5.6.3
• OS: Windows 10

Description:

When I access http://localhost:8080/js/app.js in HMR mode (npm run hot), the server returns 404 with message: "Cannot GET /js/app.js".

Steps To Reproduce:

1. Create new laravel project by using laravel new <project_name> command
2. Run npm install
3. Delete public/js/app.js to avoid confusion. Assets are served from memory
4. With browser, go to http://localhost:8080/js/app.js

[nkrh]

This is the workaround, inspired from #1437 :

Put this into webpack.mix.js.

Mix.listen('configReady', (webpackConfig) => {
  if (Mix.isUsing('hmr')) {
    // Remove leading '/' from entry keys
    webpackConfig.entry = Object.keys(webpackConfig.entry).reduce((entries, entry) => {
      entries[entry.replace(/^\//, '')] = webpackConfig.entry[entry];
      return entries;
    }, {});

    // Remove leading '/' from ExtractTextPlugin instances
    webpackConfig.plugins.forEach((plugin) => {
      if (plugin.constructor.name === 'ExtractTextPlugin') {
        plugin.filename = plugin.filename.replace(/^\//, '');
      }
    });
  }
});

[misenhower]

Just wanted to say thanks for making me aware of configReady, that's really useful 👍

[finndev]

@nkrh

I think this doesn't fix hot-reloading of css though.

[pjhartin]

@nkrh - I think @finndev's comment is with regards to your comment on #1437

[nkostadinov]

The proposed fix works but this is a workaround. All users using windows have this problem i'm still waiting for an official fix. There are many issues regarding this since v2.0.0

@JeffreyWay do you plan to apply some of the proposed solutions or we should use them this way ?

[JoeSchr]

Awesome, that actually works!

Wish I hadn't wasted hours blaming dockers and fs-events module on windows, but I'm happy now...

[patrick-hertling]

Wow, I spend an oweful lot of time looking for a solution. What @nkrh did propose did work for me.

[georgewritescode]

@nkrh Thanks for your solution there.
I've written up a little post on how I was able to get Hot Module Reloading working with Laravel Mix and React which includes your suggestion as well as other bits I worked out.

https://medium.com/@grmcameron/laravel-mix-hot-module-reloading-with-react-966ade9ff244

[jeankvd]

I'm using laravel's react scaffolding and this doesn't fix the issue for me

[theNailz]

Stil broken in the latest stable laravel/laravel release; when will a fix (this fix?) ship?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[orckid-lab]

• Laravel 5.7
• laravel-mix 3.0.0
• node 10.11.0
• npm 6.4.1
• OS: Windows 10

Issue still occurs. had to use workaround as specified above, as indicated it doesn't fix HMR for CSS

[nkostadinov]

I dont think anyone will fix this. But with the new vue-cli you actually don't need laravel mix anymore.

[orckid-lab]

@nkostadinov I was not aware that vue-cli can be used with laravel? I assume you're referring to the template by yyx990803/laravel-vue-cli-3 but doesn't that forces/drives to an SPA implementation?

[nkostadinov]

Actually I'm not using laravel as backend but the idea of mix is to provide config to webpack for easier management. It's not really bound to the framework. You just need to add manifest plugin and configure it to emit a manifest.json file.

[rosnaib11]

@nkrh It works

[chebonv]

This is the workaround, inspired from #1437 :

Put this into webpack.mix.js.

Mix.listen('configReady', (webpackConfig) => {
  if (Mix.isUsing('hmr')) {
    // Remove leading '/' from entry keys
    webpackConfig.entry = Object.keys(webpackConfig.entry).reduce((entries, entry) => {
      entries[entry.replace(/^\//, '')] = webpackConfig.entry[entry];
      return entries;
    }, {});

    // Remove leading '/' from ExtractTextPlugin instances
    webpackConfig.plugins.forEach((plugin) => {
      if (plugin.constructor.name === 'ExtractTextPlugin') {
        plugin.filename = plugin.filename.replace(/^\//, '');
      }
    });
  }
});

for the users like me, Make sure you terminate the npm while running and issue thenpm run hot command again for it work

[msonowal]

It does not work in latest version when using different public path