React-hot-loader: Why does node.js(proxy server) need react-hot-loader for HMR?

[greenfrog82]

Hi? I'm using react-hot-loader. And I have a question. but I have not resolved ...
So, Could I ask you my problem? This is as below.

I have server which is developed by node.js and view which is developed by react.js and is using react-hot-loader.
When I am developing this product, I need to proxy server for HMR in view side. So I have written following code in server side.

Then I have builded server code then I have encountered following error ..

So, I have installed react-hot-loader in server side too (Of course, It is already installed in client side). Then It works well.

Why does node.js(proxy server) need only react-hot-loader for HMR with the exception of other modules in webpack.dev.config.js file?
webpack.dev.config.js file have another modules(json-loader, css-loader) and webpack plugins(webpack.HOtModuleReplacementPlugin, HtmlwebbpackPlugin, CopyWebpackPlugin).
And It server even doesn't use this module ..

P.S I ask for understanding what my poor English .. thx .. :)

[calesce]

Hey, just as a heads up, we're no longer maintaining React Hot Loader 1.x, and instead focusing on 3.0.

However, if you're using express, you can add webpack-dev-middleware and webpack-hot-middleware without worrying about running two servers at once. I have a simple example here. You can use those middlewares with an existing express server. This works fine with React Hot Loader 1, but again we recommend moving to 3.

[calesce]

If you do want to use WebpackDevServer alongside a separate backend server, there's decent documentation here. You don't need to include React Hot Loader on the server side, just in the Webpack config.

[greenfrog82]

Sorry. I have read your answer now .. Thx for your answer.

But, I have not resolved my question. A key point of my question is why server need react-hot-loader. (as an above error message, Cannot resolve module 'react-hot' in server code ..)
Is this bug of react-hot-loader 1.3.0?

And .. I try to your simple example here. I have downloaded you example code, installed npm package and run script.
It seemed to go well, But I try to change a message of 'Home' component from 'Hello' to 'Hi' and save. Then I have received error message on my chrome browser. This is as below.

browser.js?26d3:49 Warning: [react-router] You cannot change ; it will be ignored

Could you tell me answer?

[calesce]

A key point of my question is why server need react-hot-loader. (as an above error message, Cannot resolve module 'react-hot' in server code ..)

The only place you need to reference it is in the Webpack config.

Then I have received error message on my chrome browser.

This is a warning with React Router that you can ignore, but it still works. See discussion in #249.

[greenfrog82]

Thx for your answer. But I have still not resolved my question despite your answer.

A key point of my question is why server need react-hot-loader. (as an above error message, Cannot resolve module 'react-hot' in server code ..)

The only place you need to reference it is in the Webpack config.

First, I understand above your answer. Ok, react-hot-loader module must be not placed in server side. But, My question is why when my server code build and start, it require react-hot-loader like the following image.

Then I have received error message on my chrome browser.
This is a warning with React Router that you can ignore, but it still works. See discussion in #249.

Second, I understand too. But, Your code has still not worked. See the following image. I've started your code and connected your server using web browser. And I have changed text from 'Hello, world' to 'Hello, aaaa world'. Then I've received the error message through console of web browser and the contents on web browser doesn't change. So, I've told you, Your code doesn't work.

Thx, for your kind answer :) Please resolve my question, if you know.

[calesce]

What version of Node/NPM are you using? Also, can you share a simple project reproducing the Cannot resolve module "react-hot" issue?

[calesce]

Also, I see you're on Windows, what version? I haven't tested that repository on Windows, will try that tomorrow.

[greenfrog82]

What version of Node/NPM are you using? Also, can you share a simple project reproducing the Cannot resolve module "react-hot" issue?

Ok, I'm working on my company now. And the code which occures 'Cannot resolve module "react-hot" issue is owned by my company.
Could you give me a time? I will write code which can reproduce this issue, upload to my github and share with you. May be, I am able to do this work by tomorrow night.

Also, I see you're on Windows, what version? I haven't tested that repository on Windows, will try that tomorrow.

I have tested your code on Windows 10.

[calesce]

Could you give me a time? I will write code which can reproduce this issue, upload to my github and share with you. May be, I am able to do this work by tomorrow night.

No problem, take your time.

I have tested your code on Windows 10.

Ok thanks, and what version of Node and NPM do you have installed?

[greenfrog82]

Sorry .. Please reference the following image :)

[calesce]

Thanks, I'll take a look later :smile:

[greenfrog82]

Hi, I've written a simple project reproducing the error message (Cannot resvole module 'react-hot'). Please reference the following link.

express_react_boilerplate

Once I include react-hot-loader to server side code to work well. So, When you test this project, uninstall react-hot-loader to reproduce the error message.

I will explain process what reproduce the error message through this simple project. Please see the following explain.

1. This simple project is composed server folder and client folder. server folder is server written by express.js and client folder is view written by react.js
2. first, Enter the client folder and build client source through follow command.
   npm run-script build
3. Enter the server folder. Uninstall react-hot-loader and build server source through follow command.
   3.1 uninstall --save-dev react-hot-loader
   3.2 npm run-script build
   3.3 npm run-script development

if you execute the above process, you may be received error message on console like the following pic ..

P.S
I worry about that this simple project is tested on Windows 10. So if you are using Mac or Linux, I don't know what this project works find.
if this project doesn't work on your machine, I will fix this project to work find on you machine. Please test this project and reply :)

[calesce]

For the error message, because you're running from the server, it's using the server directory's node_modules, which don't include react-hot-loader.

I'd recommend using a single package.json. You don't really need step 2 in development, because the compiling and hot updates are done by Webpack via WebackDevServer.

If you want to have a REST API, for example, alongside WebpackDevServer, you'll need to use the proxy options to point to the port that server's running on (here's an extremely simple example).

My Windows machine was running really slowly (5 years old), so I haven't been able to test the RHL3 problem yet.

[calesce]

OK, just tested the RHL3 example on Windows with the same Node/NPM versions as you gave (and using Chrome), and everything hot reloaded fine. Again, the React Router message is a warning, not an error message.

[greenfrog82]

Thx for your careful answers which are helpful for me :)
I've read your answer and studied my problem. And I have two issue.

I'd recommend using a single package.json. You don't really need step 2 in development, because the compiling and hot updates are done by Webpack via WebackDevServer.

First, about the above your answer, what is meant?
Is it wrong that My project is separated the server project and the client project? You are telling me to combine the server project and the client project to single project?
And, "You don't really need step 2 in development,", what is meant?

OK, just tested the RHL3 example on Windows with the same Node/NPM versions as you gave (and using Chrome), and everything hot reloaded fine. Again, the React Router message is a warning, not an error message.

Second, When I try to your example again, It still doesn't work well. But, When I try to another way, It works very well. These results are only different way to run your code.
First case that example doesn't work well, I try to run your example on Atom Editor.
Second case that example works very well, I try to run your example on command.
These result are reproduced on my colleague's computer. He is same condition to my computer.
Could you test this environment again? Please see the following information ..

I'm using Atom editor to develop node.js. I'm using build and build-npm-apm package to build and run project on Atom editor.

[calesce]

Second, When I try to your example again, It still doesn't work well. But, When I try to another way, It works very well.

The hot updates should come on file changes, all you need to do is npm start and edit the file of the component. The editor shouldn't matter. Does build-npm-apm do anything different on file save?

And, "You don't really need step 2 in development,", what is meant?

Meaning step 2 of the instructions you gave, which is running npm run build on the client bundle.

Is it wrong that My project is separated the server project and the client project?

Not necessarily, I just think that makes things simpler if you're using Node as your backend (obviously that's a different case if you're using PHP, for example).

If you want to split up client and server projects, you'll need to put all of your Webpack dependencies alongside your client-side dependencies, and run WebpackDevServer from there. You can pass the port of the API server as a proxy option.

[greenfrog82]

I've moved WebpackDevServer code to client side and refactoried all my code. Thanks to your answer.

The hot updates should come on file changes, all you need to do is npm start and edit the file of the component. The editor shouldn't matter. Does build-npm-apm do anything different on file save?

AFAIK, No build-npm-apm package just run npm-script. And I use this package very well until now. if you think what this problem is not for [email protected], I will issue to noseglid/atom-build.

Could you check this problem and tell me your decision?

Thank you. Have a nice weekend!

[calesce]

if you think what this problem is not for [email protected], I will issue to noseglid/atom-build.

I'm not sure, but I'd say make sure that it's not re-running npm start on file save or anything like that. Probably do some more debugging on your setup before opening an issue there.

[greenfrog82]

OK, I'll debug my ATOM setting. If I find some problem about [email protected], I'll raise issue here.
Thank you very much for you answer until now. Your answer is very helpful for me :)