webpack-dev-server with hot reload reloading entire page with css changes

Question

[Edit] Github Test Repo Created for you to test!!

---

I have hot reloading without any problems, but it reloads the entire page whenever I make a single css change. I would like it to inject any css changes and ideally do similarly with react components unless a full reload is truly needed.

** I get the following console logs **

[WDS] App updated. Recompiling...
client?cd17:41 [WDS] App updated. Recompiling...
client?8505:41 [WDS] App updated. Recompiling...
client?cd17:41 [WDS] App updated. Recompiling...
client?8505:41 [WDS] App hot update...
dev-server.js:45 [HMR] Checking for updates on the server...
client?cd17:41 [WDS] App hot update...
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 ./node_modules/css-loader/index.js?{"modules":true,"sourceMap":true,"importLoaders":2,"localIdentName":"[path]___[name]__[local]___[hash:base64:5]"}!./node_modules/postcss-loader/index.js?sourceMap&parser=postcss-scss!./src/components/shared/userPages/userPages.css is not accepted
Update propagation: ./node_modules/css-loader/index.js?{"modules":true,"sourceMap":true,"importLoaders":2,"localIdentName":"[path]___[name]__[local]___[hash:base64:5]"}!./node_modules/postcss-loader/index.js?sourceMap&parser=postcss-scss!./src/components/shared/userPages/userPages.css -> ./src/components/shared/userPages/userPages.css -> ./src/components/Signin/index.js -> ./src/routes.js -> ./src/index.js -> 0
    at hotApply (http://localhost:8080/dist/main.js:430:30)
    at hotUpdateDownloaded (http://localhost:8080/dist/main.js:283:13)
    at hotAddUpdateChunk (http://localhost:8080/dist/main.js:263:13)
    at webpackHotUpdateCallback (http://localhost:8080/dist/main.js:8:12)
    at http://localhost:8080/dist/0.75f9c418ba8b1fdc9ad0.hot-update.js:1:1

webpack config

/* eslint-disable */
const Config = require('webpack-config').default;
const webpack = require('webpack');
const DashboardPlugin = require('webpack-dashboard/plugin');
const {environment} = require('webpack-config');
const path = require('path');

environment.set('cssIdent', '[path]___[name]__[local]___[hash:base64:5]');

module.exports = new Config().extend('./webpack.base.config.js').merge({
  entry: [
    'react-hot-loader/patch',
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './src/index.js'
  ],
  devServer: {
    contentBase: [
      'demo/'
    ],
    hot: true,
    historyApiFallback: true,
    host: '0.0.0.0',
    publicPath: '/dist/'
  },
  output: {
    filename: 'main.js',
    path: path.join(__dirname, 'dist'),
    publicPath: '/dist/'
  },
  devtool: 'inline-source-map',
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        BABEL_ENV: JSON.stringify('development')
      }
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new DashboardPlugin()
  ],
  cache: true
});

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import { AppContainer } from 'react-hot-loader';
import { ConnectedRouter } from 'react-router-redux'
import injectTapEventPlugin from 'react-tap-event-plugin';
import nprogress from 'nprogress';
import store from './configureStore';
import Routes from './routes';
import './components/shared/main.css';
import createHashHistory from 'history/createHashHistory'
const history = createHashHistory({
  hashType: 'slash'
});

//Remove on screen tap delay
injectTapEventPlugin();

//Add progress bar
nprogress.configure({ minimum: 0.15, showSpinner: false, speed: 500 });

// Now you can dispatch navigation actions from anywhere!
// store.dispatch(push('/foo'))

ReactDOM.render(
  <AppContainer>
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <Routes/>
      </ConnectedRouter>
    </Provider>
  </AppContainer>,
  document.getElementById('app')
);

Store.js

import { createStore, applyMiddleware, compose } from 'redux'
import { createLogger } from 'redux-logger'
import { routerMiddleware } from 'react-router-redux'
import reducers from './reducers';

const configureStore = function (history, preloadedState = {}) {
  // Build the middleware for intercepting and dispatching navigation actions
  const middlewareHistory = routerMiddleware(history);

  const store = createStore(
    reducers,
    preloadedState,
    compose(
      applyMiddleware(createLogger(), middlewareHistory)
    )
  );

  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('./reducers', () => {
      const nextReducer = require('./reducers').default;

      store.replaceReducer(nextReducer);
    });
  }

  return store;
};

export default configureStore(history);

A random component

import React from 'react';
import { NavLink } from 'react-router-dom'
import store from '../../configureStore';

import userStyles from '../shared/userPages/userPages.css';

class SignIn extends React.Component {
  render(){
    return (
      <div className={userStyles.home}>
      </div>
    );
  }
}

export default SignIn;

.babelrc

{
  "presets": [
    ["es2015", {"modules": false}],
    "stage-0",
    "react"
  ],
  "plugins": [
    "react-hot-loader/babel"
  ],
  "env": {
    "development/client": {
      "plugins": [
        ["transform-runtime", {
          "helpers": false,
          "polyfill": false,
          "regenerator": true
        }]
      ]
    },
    "test": {
      "presets": ["es2015"],
      "plugins": [
        ["transform-runtime", {
          "helpers": false,
          "polyfill": false,
          "regenerator": true
        }]
      ]
    }
  }
}

Comptom

Did you disable modules in Babel [“es2015”, {“modules”: false}]? I think repo would help. – Kweichow

That is in there yes, in my babelrc, I agree, I will work on getting a repo out to test – Comptom

Did you look here, you need to tell your app how to accept the change – Chapnick

Isn't that documention for webpack v1? Sorry I didn't make it clear that I am using webpack v2 – Comptom

Here is a very dumbed down repo: github.com/hutber/test_hrm I'm not actually seeing the initial error messages anymore, but the problem is still there. No injecting of css. Any chances made to components or css reloads the whole page. – Comptom

Unable to setup the repo. Can you fix it please? For starters, the name is also invalid. – Plethoric

Oh really, it's working for me, the link that is – Comptom

Answer 1

you can use extract text webpack plugin for css hot reloading instead of whole page/module reloading. below is the guideline to know how to use https://github.com/webpack-contrib/extract-text-webpack-plugin https://www.npmjs.com/package/extract-text-webpack-plugin

Backsight

Answer 2

For me it didn't work because I didn't have .babelrc file in my root directory and with below code inside it.

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

Sanorasans