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.
Your webpack config is off. Take a look at react-transform-boilerplate for a correct setup.
webpack.config.js
.babelrc
I use the following version : "webpack": "~1.12.14" "webpack-hot-middleware": "^2.10.0" "webpack-dev-middleware": "^1.6.1"
And I use following code in app.js in my react.js project.
Same code get hot replaced on other employees computer,but not always,but many times hot replace won't work in my computer.
Try updating your module loader to this:
I figured out the solution myself.
I have to run my server with
sudo
. Instead ofnpm start
, it has to besudo npm start
.Hope it helps!