react-redux-universal-hot-example

react-redux-universal-hot-example copied to clipboard

Hello Bertho,

I just want to share for who is wondering howto upgrade to webpack4 and babel 7. I spend a lot of hours over the past days struggling with react-hot-loader that was not working

Babel7

• Upgrade is pretty straight on, just add the new namespaced packages en replace the requires with their namespaced ones. Take a look at the package.json and fix where problems arise.
• Upgrade .babelrc
• add polyfill to webpack configs

Webpack 4

• Upgrade to latest versions,
• Add webpack-cli
• Add mode into dev.config.js, prod.config.js and vendor.config.js
• Update vendor.config.js with new babel packages

react-loadable

• Is currently not available for webpack 4, but there is a fork 7rulnik/react-loadable/webpack see issue
• I put a resolve.alias in mij webpack configurations but there still some places you need to use the new package name.
• Everey component that is load through react-loadable must be hot exported see: react-hot-loader

Eslint

• eslint-config-airbnb does not play nice with the latest eslint packages. But the fix was simple i looked over at the source and now i extend with the separate rule files.
• added the parser option ecmaversion: 2017 eslint requested

See full source over at https://github.com/lemonCMS/react-redux-universal-hot-example-1

I did not create a pull request because of the hacky stuff that went on to get it to work.

---

Happy Coding

Thank you for your contribution, it's great!

You can see all the changes here: https://github.com/bertho-zero/react-redux-universal-hot-example/compare/master...lemonCMS:master There are many things that could serve me here.