Proposal of Webpack 4 and WebpackServe integration

Is this a bug report?

No.

Proposal

I just recently solved react-error-overlay and react-dev-utils/launchEditor integration with webpack 4 and webpack-serve.

I created hot-client-plugin.

Would you like me to configure it in the next branch?

[maximandrews]

@iansu I’m proposing in the next probably major release (next branch) of react-scripts to integrate webpack 4 with webpack-serve (Koa.js).

Currently, the next branch uses webpack 4, but still relies on webpack-dev-server (Express.js).

It is not so easy to integrate webpack-serve because it relies on webpack-hot-client which do not allows integration of react-error-overlay properly. At the moment their offered Error Overlay solution IMHO is a hack which works with errors.

I tried to offer my help to webpack-serve guys, but after I shared my excitement with react-error-overlay they became resistant and aggressive. They even deleted my last comment which stated it is not cool to have “reputational wars” with others just because they propose better solutions.

Anyway, the only option is to completely disable webpack-hot-client by setting hotClient option to false in a webpack-serve config and to use custom solution as they offered in their reply to me. Therefore, I created hot-client-plugin to address this issue.

To integrate hot-client-plugin into create-react-app there are needed only a few steps:

1. remove react-dev-utils/webpackHotDevClient from the entry array. A modified version will be injected automatically;
2. remove HotModuleReplacementPlugin from plugins array. It will be injected automatically;
3. add HotClientPlugin to plugins array;
4. replace webpack-dev-server package with webpack-serve in package.json file by issuing command npm remove webpack-dev-server and then npm i webpack-serve in react-scripts folder;
5. rename webpackDevServer.config.js to webpackServe.config.js and adapt it to use with webpack-serve with the hotClient option set to false to disable webpack-hot-client completely.

It is pretty much all the details about my proposal and changes I’m offering to implement.

What do you think?

[maximandrews]

@tbassetto This was my first thought, but when I opened webpack-serve README.md I found this on the top: This repository has been archived by the owner. It is now read-only.

If you are looking to use React with KOA and/or backend, you can use my package fullstack-scripts. Just give me a notice and I will create proper README.md file quickly. I’m going to create a proper starter kit in the nearest future, for those who are seeking React, Redux, Router, Koa or a third party backend or any of mentioned tech combination.

Checkout live fullstack-scripts use case here