Webpack-dev-server: [HMR] Error: Aborted because 36 is not accepted

[hendrikeng]

What is the current behavior?

I managed to get the webpack-dev-server working with valet using the following setup:

module.exports = {
  entry: [
    './src/js/index.js',
  ],
  output: {
    filename: 'app.bundle.js',
    path: path.resolve(__dirname, 'src'),
    publicPath: 'http://localhost:8080/', // in html asset location http://localhost:8080/app.bundle.js
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
            },
            {
              loader: 'postcss-loader',
            },
            {
              loader: 'sass-loader',
            },

          ],
          publicPath: '/assets/',
        }),
        exclude: /node_modules/,
      },
      },
    ],
  },
  devServer: {
    hot: true, // this enables hot reload
    inline: true, // use inline method for hmr
    host: 'app.dev', // this is the valet domain nginx php
    port: 8080,
    contentBase: path.join(__dirname, 'src'), // should point to the laravel public folder
    watchOptions: {
      poll: false, // needed for homestead/valet setup
    },
  },
  plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new ExtractTextPlugin({
        filename: 'app.css',
        allChunks: true,
      }),
    ],
};

The first problem is that webpack-dev-server starts with app.dev:8080 , if i remove the 8080 in the browser it all works, its just a bit annyoing, if i change the port to 80 in the config it stops working.

the main bug is that if i change something in the js it reloads the page and not injects the code via HMR:

[WDS] Hot Module Replacement enabled.
2client?1f3e:41 [WDS] App updated. Recompiling...
client?1f3e:41 [WDS] App hot update...
dev-server.js:45 [HMR] Checking for updates on the server...
dev-server.js:33 [HMR] Cannot apply update. Need to do a full reload!
(anonymous) @ dev-server.js:33
dev-server.js:34 [HMR] Error: Aborted because 36 is not accepted
Update propagation: 36 -> 88
    at hotApply (http://localhost:8080/app.bundle.js:796:30)
    at hotUpdateDownloaded (http://localhost:8080/app.bundle.js:649:13)
    at hotAddUpdateChunk (http://localhost:8080/app.bundle.js:629:13)
    at webpackHotUpdateCallback (http://localhost:8080/app.bundle.js:372:12)
    at http://localhost:8080/5.0fb5840cb1d2ed50d4d4.hot-update.js:1:1

What is the expected behavior?
not reloading the full page

Please mention your webpack and Operating System version.
osx sierra , [email protected], [email protected]

[bebraw]

Hi,

There's not enough information to debug. Any chance you could include a full project?

[hendrikeng]

@bebraw thanks a lot, u will find it here :

https://github.com/hendrikeng/webpackHMR

i made the dependencies minimal but left all the js related stuff that could actually cause the issue.

[bebraw]

I think I see now. You have to implement the client interface somehow. I have a small write-up here.

[hendrikeng]

@bebraw thanks a lot, its working now 👍

[yangkean]

@bebraw , hello, I have implemented the client interface, but console still outputs:

log.js:25 Ignored an update to unaccepted module ./src/print.js -> 1
log.js:25 [HMR] The following modules couldn't be hot updated: (They would need a full reload!)
log.js:25 [HMR]  - ./src/print.js

the whole console message is:

log.js:23 [HMR] Waiting for update signal from WDS...
log.js:23 [HMR] Waiting for update signal from WDS...
client?cd17:64 [WDS] Hot Module Replacement enabled.
client?cd17:64 [WDS] Hot Module Replacement enabled.
client?cd17:67 [WDS] App updated. Recompiling...
client?cd17:67 [WDS] App updated. Recompiling...
client?cd17:67 [WDS] App updated. Recompiling...
client?cd17:67 [WDS] App updated. Recompiling...
client?cd17:193 [WDS] App hot update...
log.js:23 [HMR] Checking for updates on the server...
client?cd17:193 [WDS] App hot update...
log.js:23 [HMR] Checking for updates on the server...
log.js:25 Ignored an update to unaccepted module ./src/print.js -> 1
./node_modules/webpack/hot/log.js.module.exports @ log.js:25
onUnaccepted @ only-dev-server.js:25
hotApply @ bootstrap e5893b5…:437
(anonymous) @ only-dev-server.js:20
log.js:25 [HMR] The following modules couldn't be hot updated: (They would need a full reload!)
./node_modules/webpack/hot/log.js.module.exports @ log.js:25
./node_modules/webpack/hot/log-apply-result.js.module.exports @ log-apply-result.js:12
(anonymous) @ only-dev-server.js:39
log.js:25 [HMR]  - ./src/print.js
./node_modules/webpack/hot/log.js.module.exports @ log.js:25
(anonymous) @ log-apply-result.js:14
./node_modules/webpack/hot/log-apply-result.js.module.exports @ log-apply-result.js:13
(anonymous) @ only-dev-server.js:39
log.js:23 [HMR] Nothing hot updated.
log.js:23 [HMR] App is up to date.
index.js:8 Accepting the updated printMe module!
log.js:23 [HMR] Updated modules:
log.js:23 [HMR]  - ./src/print.js
log.js:23 [HMR] App is up to date.

webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  devtool: 'inline-source-map',
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    hotOnly: true,
  },
  entry: {
    app: './src/index.js',
    print: './src/print.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Hot Module Replacement',
      filename: 'index.html',
    }),
    new CleanWebpackPlugin(['dist']),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
  ],
};

./src/index.js:

import _ from 'lodash';
import printMe from './print.js';

if(module.hot) {
  module.hot.accept('./print.js', function() {
    console.log('Accepting the updated printMe module!');

    document.body.removeChild(element);
    element = component();
    document.body.appendChild(element);
  });
}

let element = component();

function component() {
  const element = document.createElement('div');
  const btn = document.createElement('button');

  element.innerHTML = _.join(['Hell', 'webpack'], ' ');

  btn.innerHTML = 'Click me and check the console!';
  btn.onclick = printMe;

  element.appendChild(btn);

  return element;
}

document.body.appendChild(element);

./src/print.js:

export default function printMe() {
  //console.log('I get called from print.js!');
  console.log('Updating print.js...')
}

package.json:

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server --open"
  },
  "keywords": [
    "webpack",
    "demo"
  ],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "lodash": "^4.17.4"
  },
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.16",
    "html-webpack-plugin": "^2.29.0",
    "webpack": "^3.4.1",
    "webpack-dev-server": "^2.6.1"
  }
}

other environment:

• node v7.4.0
• npm 4.0.5
• macOS Sierra 10.12
• Chrome v59.0.3071.115

please give me help.