I have gone through many answers on StackOverflow & on GitHub issues as well but, I am still stuck in Hot Module Replacement in Webpack. I am using npm start
to run my server with webpack-dev-server --hot --inline
. I am trying to change code in my React component, but nothing happens in the browser.
I am using Google Chrome Version 49.0.2623.87 (64-bit) on Ubuntu 14.04LTS.
In my browser console
, I am getting log messages as
[HMR] Waiting for update signal from WDS...
[WDS] Hot Module Replacement enabled.
But, no hot/live reload is happening. Nothing gets displayed when I change code in my React component file. I was following first video of this tutorial, Egghead.io/ReactFundamentals where everything worked fine.
Following are my package.json & webpack.config.js files.
package.json
{
"name": "react-fundamentals",
"version": "1.0.0",
"description": "Fundamentals of ReactJS",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot --inline"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.0.0-rc.2",
"react-dom": "^15.0.0-rc.2"
},
"devDependencies": {
"babel": "^6.5.2",
"babel-core": "^6.7.2",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"react-hot-loader": "^1.3.0",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1"
}
}
webpack.config.js
module.exports = {
context: __dirname,
entry: "./main.js",
output: {
path: __dirname,
filename: "bundle.js"
},
devServer: {
port: 7777
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel",
query: {
presets: ["es2015", "react"]
}
}
]
}
}
It will be great if someone can guide me through this issue as I am not able to proceed further efficiently with the tutorial.
Update I have posted the answer below.
I figured out the solution myself.
I have to run my server with sudo
. Instead of npm start
, it has to be sudo npm start
.
Hope it helps!