Monday, April 4, 2016

Webpack Dev Server (webpack-dev-server) Hot Module Replacement (HMR) Not Working

By Hường Hana 12:00 PM , , , , Leave a Comment

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.

Thanks!

EDIT

I don't know how but, I started the server again with npm start after few days today & it automatically started loading files on the browser after the change in the code. I am still thinking what was the issue. Strange!

For the time being, it is working. Thanks everyone for your time!

3 Answers

Answers 1

Your webpack config is off. Take a look at react-transform-boilerplate for a correct setup.

webpack.config.js

var path = require('path'); var webpack = require('webpack');  module.exports = {   // or devtool: 'eval' to debug issues with compiled output:   devtool: 'cheap-module-eval-source-map',   entry: [     // necessary for hot reloading with IE:     'eventsource-polyfill',     // listen to code updates emitted by hot middleware:     'webpack-hot-middleware/client',     // your code:     './src/index'   ],   output: {     path: path.join(__dirname, 'dist'),     filename: 'bundle.js',     publicPath: '/dist/'   },   plugins: [     new webpack.HotModuleReplacementPlugin(),     new webpack.NoErrorsPlugin()   ],   module: {     loaders: [{       test: /\.js$/,       loaders: ['babel'],       include: path.join(__dirname, 'src')     }]   } };

.babelrc

{   "presets": ["react", "es2015"],   "env": {     "development": {       "presets": ["react-hmre"]     }   } }

Answers 2

devServer: {  inline: true, // you missed this line which will reload the browser  port : 7777 }

Answers 3

Try updating your module loader to this:

loaders: [       {         test: /\.jsx$/,         exclude: /node_modules/,         loaders: ["react-hot", "babel"],         query: {           presets: ["es2015", "react"]         }       }     ]
If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment