Corresponding view does not rerender

[Miklet]

I'm submitting a bug report

• Library Version: 0.1.0

Please tell us about your environment:

• Operating System: Windows 8.1

• Node Version: 6.9.2

• NPM Version: 3.9.6

• JSPM OR Webpack AND Version webpack 2.5.1

• Browser: Chrome 58.0.3029.110

• Language: ESNext

Current behavior: HMR does update and replace view-model but without updating corresponding view.

Expected/desired behavior:

• What is the expected behavior? To update corresponding view with current view-model.

Not sure if it is a bug or my mistake. I use webpack-dev-middleware and webpack-hot-middleware along with browser-sync. My webpack config:

/*global __dirname, module, process */
const path = require('path');
const { AureliaPlugin } = require('aurelia-webpack-plugin');
const NyanProgressPlugin = require('nyan-progress-webpack-plugin');
const webpack = require('webpack');

const isProduction = process.env.NODE_ENV === 'production';
const plugins = [new AureliaPlugin({
  featuers: {
    svg: false
  }
})];
const entry = ['aurelia-bootstrapper'];

if (isProduction) {
  plugins.push(
    new webpack.optimize.UglifyJsPlugin({
      mangle: true,
      compress: {
        warnings: false,
        pure_getters: true,
        unsafe: true,
        unsafe_comps: true,
        screw_ie8: true
      },
      output: {
        comments: false
      }
    })
  );
} else {
  plugins.push(
    new NyanProgressPlugin(),
    new webpack.HotModuleReplacementPlugin()
  );
  entry.push('webpack-hot-middleware/client?reload=true&overlay=true');
}

module.exports = {
  context: path.resolve(__dirname),
  resolve: {
    extensions: ['.js'],
    modules: ['src', 'node_modules'].map(dir => path.resolve(__dirname, dir))
  },
  entry,
  output: {
    filename: 'app.built.js',
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.html$/,
        use: 'html-loader'
      }
    ]
  },
  devtool: isProduction ? false : 'inline-source-map',
  plugins
};

BrowserSync configuration:

browserSync.init({
    online: false,
    open: false,
    port: 9000,
    http: true,
    https: true,
    proxy: proxySettings ? `https://${proxySettings.url}:${proxySettings.port}` : defaultServerForProxying,
    middleware: [
      webpackDevMiddleware(bundler, {
        publicPath: config.output.publicPath
      }),
      webpackHotMiddleware(bundler)
    ]
  });

When I update view-model browser's console seems fine:

[HMR] bundle rebuilding
[HMR] bundle rebuilt in 1232ms
[HMR] Checking for updates on the server...
Running default HMR for pages/home/index
[HMR] Updated modules:
[HMR]  - ./src/pages/home/index.js
[HMR] App is up to date.
Analyzing pages/home/index->GoalsIndex
Replacing function GoalsIndex() {
  _classCallCheck(this, GoalsIndex);

  this.goalsData = {
    summary: {
      savedSoFar: { amount: 0, currency: 'PLN' },
      averageMonthlyTempo: { amount: 0, currency: 'PLN' },
 … with function GoalsIndex() {
  _classCallCheck(this, GoalsIndex);

  this.goalsData = {
    summary: {
      savedSoFar: { amount: 0, currency: 'PLN' },
      averageMonthlyTempo: { amount: 0, currency: 'PLN' },

The funny thing is that it works for only view changes, it hot reloads correctly.

[Miklet]

I need to correct myself. I noticed that only files like main.js, app.js or any index.js which is entry module for view is not rerendering his corresponding views.

[EisenbergEffect]

Currently the HMR implementation can't dynamically update the main, app or router configuration. That's a pretty tricky problem to solve since some of that would involve refreshing your entire app view anyway. We'll track this as a new feature for HMR.