The console outputs Ignored an update to unaccepted module
error, how to fix it?
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.
The following is my code:
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:
please give me help.
After debugging and testing, I think I know the answer.
Webpack-dev-server creates a client side script for every entry.
When I don't write any HMR interface, console outputs like this:
It seems like for the app(./src/index.js)
client side script, index.js
will accept the change of its dependency - print.js
.
But for the print(./src/print.js)
client side script, nothing will accept the change of its dependency - print.js
.
So, only write a HMR interface in index.js
don't work to the second situation and it throws Ignored an update to unaccepted module
error.