Can not config HMR

[roman-orlovskiy]

I wanted to add HMR without refresh page.
I ejected project, and modify webpack.config.dev.
But HMR not worked.

I found, that url loader breaks HMR:

  {
    exclude: [
      /\.html$/,
      /\.(js|jsx)$/,
      /\.css$/,
      /\.json$/,
      /\.svg$/
    ],
    loader: 'url',
    query: {
      limit: 10000,
      name: 'static/media/[name].[hash:8].[ext]'
    }
  }

If i remove "exclude" parameter and added custom "test", all works fine.

I spent for found this for about two days and, i think it needs to move to custom "test" field.

[gaearon]

Could you send a PR if you have a better solution? Thanks!

[gaearon]

I'm going to close because it's not exactly obvious what caused your issue (and how HMR relates to the loader configuration). Please send a PR if you know a good fix.

[benarmston]

I've also recently ran into this problem, and I believe I know what the underlying issue is.

tl;dr add /(webpack)-hot-middleware/ to the exclude array for the url-loader.

I've ejected a create-react-app in order to add sass-loader and resolve-url-loader to config/webpack.config.dev.js, and to better deal with building and bundling a local dependency. I've not added support for HMR, and my new webpack config works absolutely fine.

I then attempted to add storybook to my app. This resulted in a .storybook/webpack.config.js being added which was not able to compile my app (it needed the sass-loader and resolve-url-loader configurations). yarn run storybook would not work, but yarn run start worked fine. My solution was to require config/webpack.config.dev.js in .storybook/webpack.config.js and use the loaders and preloaders which I already knew to work.

This fixed the issue with storybook's webpack configuration being unable to compile my app, but broke HMR in storybook. Adding /(webpack)-hot-middleware/ to the exclude array for the url-loader fixed HMR in storybook.

I'm not sure if the /(webpack)-hot-middleware/ regex matches too much or too little to be included as a general solution, but it works for me, and might prove to be a good starting point for anyone else who has this problem and happens across this issue.