Create-react-app: Proposal of Webpack 4 and WebpackServe integration

[maximandrews]

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?

[bugzpodder]

I think create-react-app wants to replace webpack-dev-server with webpack-serve at some point. I think there is still effort to support node 6, which webpack-hot-client seeems to support but not hot-client-plugin?

[maximandrews]

Thanks, for prompt response.

I could make hot-client-plugin to support node 6 if you want.

[bugzpodder]

I think Timer and iansu would know more about the state of this :)

[maximandrews]

Please, could you ask them to check this proposal, to make sure If there is a point to put more efforts.

Thanks.

[maximandrews]

Just added support of Node v6.9.0 the same as webpack-hot-client.

If you going to add koa-compress you will need to include things like async/await, therefore, anyway you will need node 8.

[maximandrews]

Hi @Timer and @iansu. Please, could you give your opinion on this proposal?

Thanks.

[iansu]

Can you please provide some more details about the specific changes you're proposing in Create React App?

[nathfreder]

This would case issues with people who are using Storybook. Unless you plan on forcing people to use alpha versions.

[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?

[Timer]

Reports are that webpack-serve has been discontinued, so I'll close this.

Thanks for your time everyone!

[tbassetto]

@Timer: Do you have any source to point to? webpack-dev-server (used by CRA) has been discontinued, not webpack-serve.

[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