Hot module Reload not reloading the page

[pavsaund]

Hot Module reload doesn't seem to be working correctly. It looks like the app is registering a change, but is not able to refresh. Not really sure where to start to debug this.

This is the browser console output:

[pavsaund]

Adding some more info - In my local webpack config, when I override the before function with the exact same code that is already set up in Vanir, I get different behaviour(!). It still picks up on the change, but instead realises it needs to do a full reload. Which is better than NO reload, but still not optimal. Here's the log with some more promising error messages:

Browser Console Log:

[HMR] Cannot apply update. Need to do a full reload!
[HMR] Error: Aborted because 59242 is not accepted
      Update propagation: 59242 -> 80186 -> 8376

webpack.config.js:

const webpack = require('@dolittle/vanir-webpack/frontend');
module.exports = (env, argv) => {
    return webpack(env, argv, '/_/my-microservice', config => {
        // copy&pasted from vanir codebase that causes the solution to do a full reload in browser on every change
        config.devServer.before= (app, server, compiler) => {
            app.get('*', (req, res, next) => {
                const match = req.originalUrl.match(fileTypes);
                if (match && match.length > 0) {
                    next();
                    return;
                }
                const html = require('./HtmlInterceptorPlugin').getGeneratedHtml();
                res.send(html);
            });
        }
        config.devServer.proxy = {
            '/_/my-microservice/graphql': 'http://localhost:3006',
            '/api': 'http://localhost:3006'
        };
    }, 8084, 'MyApplication');
};

[einari]

I think we're touching on multiple problems. The hot loading itself seems to be stopped somehow when running through the composition that we do with typically nginx. I noticed in a project yesterday that didn't use this that it was automatically responding - which it doesn't in other projects that uses the nginx composition.

The second problem is as you point out, the fact that it reloads the full page.

More investigation needed :)

[einari]

Figured out what the main issue here is. The Hot Reload payload comes in the form of a JSON. The reason the workaround works, is that "fileTypes" is undefined.

The fix will be in the devServer.js file with going from:

const fileTypes = /\.(js|css|html|png|jpg|jpeg|gif)$/;

to

const fileTypes = /\.(js|json|css|html|png|jpg|jpeg|gif)$/;

Adding the JSON file as a known file type and one that it will then carry over to the next middleware.