HMR and Rails 5.1.4

[eadz]

I followed the HMR instructions on a new rails app, and it doesn't seem to work.

The Instructions don't match the code in the latest rails/webpacker setup.

I have this in my config/webpack/development.js

const environment = require('./environment')

const configureHotModuleReplacement = require('webpacker-react/configure-hot-module-replacement')

module.exports = configureHotModuleReplacement(environment.toWebpackConfig());

and in packs/application.js changed the following -import WebpackerReact from 'webpacker-react'; +import WebpackerReact from 'webpacker-react/hmr';

Finally, added this

if (module.hot) 
   module.hot.accept('pages/MyRoot', () =>
    WebpackerReact.renderOnHMR(MyRoot) )

The output of the server ( using --hot ) is this:

                            Asset      Size  Chunks                    Chunk Names
application-779571fc896412f8d798.js   4.11 MB       0  [emitted]  [big]  application
                      manifest.json  68 bytes          [emitted]         
[./app/javascript/packs/application.js] ./app/javascript/packs/application.js 1.85 kB {0}
[./app/javascript/pages/UserProfile/index.js] ./app/javascript/pages/UserProfile/index.js 4.29 kB {0}
[./app/javascript/pages/sessions/NewSession.js] ./app/javascript/pages/sessions/NewSession.js 3.73 kB {0}
[./app/javascript/pages/timeline/TimeLine.js] ./app/javascript/pages/timeline/TimeLine.js 3.39 kB {0} [built]
[./app/javascript/pages/user/index.js] ./app/javascript/pages/user/index.js 3.46 kB {0}
[./node_modules/loglevel/lib/loglevel.js] ./node_modules/loglevel/lib/loglevel.js 7.74 kB {0}
[./node_modules/react-hot-loader/lib/patch.js] ./node_modules/react-hot-loader/lib/patch.js 209 bytes {0}
   [0] multi (webpack)-dev-server/client?http://localhost:3035 react-hot-loader/patch ./app/javascript/packs/application.js 52 bytes {0}
[./node_modules/react-hot-loader/patch.js] ./node_modules/react-hot-loader/patch.js 40 bytes {0}
[./node_modules/strip-ansi/index.js] ./node_modules/strip-ansi/index.js 161 bytes {0}
[./node_modules/styled-components/dist/styled-components.es.js] ./node_modules/styled-components/dist/styled-components.es.js 65.8 kB {0}
[./node_modules/turbolinks/dist/turbolinks.js] ./node_modules/turbolinks/dist/turbolinks.js 35.3 kB {0}
[./node_modules/url/url.js] ./node_modules/url/url.js 23.3 kB {0}
[./node_modules/webpack-dev-server/client/index.js?http://localhost:3035] (webpack)-dev-server/client?http://localhost:3035 7.95 kB {0}
[./node_modules/webpacker-react/hmr.js] (webpack)er-react/hmr.js 631 bytes {0}
    + 282 hidden modules
webpack: Compiled successfully.

There is nothing in the browser console to indicate any error, just when I edit a file the whole page reloads. Any ideas?

[renchap]

Can you please show the whole application.js file (or at least the WebpackerReact.setup call and any Webpacker -related lines)? Also, what is displayed in your console when you load the page, and then when you edit a file?