search

cdebotton / react-universal

React, redux, react-router, graphql, postgres, koa, universal starter-kit
293 stars 27 forks source link

HMR does not work. GET http://localhost:3001/__webpack_hmr produces 404 error #5

Closed nodkz closed 8 years ago

nodkz commented 8 years ago

Try change reducer code for testing HMR counter: state.counter + 10, like in Dan Abramov's (@gaearon) presentation on React Europe and get error in browser:

EventSource cannot load http://localhost:3001/__webpack_hmr. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 404.

react-universal-hmr

Webpack in console rebuilded successfully for client and server.

PS. The best of all starter kit, which I discovered! Thank you very much!

cdebotton commented 8 years ago

First, thanks! Secondly, I'm having trouble recreating this bug from a clean install. When you start the server, are you running just node index from the project root? And when the services start, do you see something similar to the following output?

08:52:35 g +0ms      GraphQL is running at http://localhost:8080
08:52:36 d +0ms      Dev Server is running at http://localhost:3001
08:52:36 c +0ms      Client running at http://localhost:3000
08:52:43 d +7s       Compiled server with Webpack
08:52:44 d +569ms    Compiled client with Webpack
08:52:44 d +82ms     webpack built c7a230a24053e8d72d57 in 7810ms
nodkz commented 8 years ago

Webpack and watchers works perfectly. Here is my console log:

react-universal git:(master) node index.js
15:21:17 g +0ms      GraphQL is running at http://localhost:8080
15:21:17 d +0ms      Dev Server is running at http://localhost:3001
15:21:18 c +0ms      Client running at http://localhost:3000
15:21:24 d +6s       Compiled server with Webpack
15:21:25 d +774ms    Compiled client with Webpack
15:21:25 d +116ms    webpack built 1128602193aee0753b10 in 7734ms
15:22:24 d +58s      webpack building...
15:22:25 d +1s       Compiled client with Webpack
15:22:25 d +104ms    webpack built af18816398728f9620c3 in 1122ms
15:22:25 d +150ms    Compiled server with Webpack
17:40:30 d +2h       webpack building...
17:40:32 d +1s       Compiled client with Webpack
17:40:32 d +100ms    webpack built 148f9651b35c750c09fd in 1671ms
17:40:32 d +221ms    Compiled server with Webpack

Clean install I made today, a few hours ago. I use chrome.

Right now I try Safary, and try change Component view. Same problem appears. Nothing does not reloaded.

19:00:41 d +1h       webpack building...
19:00:42 d +1s       Compiled client with Webpack
19:00:42 d +143ms    webpack built 472db7a5bbc10b1dd17c in 1751ms
19:00:43 d +192ms    Compiled server with Webpack
nodkz commented 8 years ago

But I download code about week ago. Today I install npm packages.

Now I try do it from scratch. Need couple of minutes, to provide result for you...

cdebotton commented 8 years ago

Could you let me know which versions of Node and NPM you are using if you continue having issues?

nodkz commented 8 years ago 
node -v
v4.2.1

npm -v
2.14.7

From scratch same problem. HMR doesn't work.

Do update npm update -g npm. Now have version 3.3.9. Run npm install, it does not help.

Remove npm_modules folder, run again npm install. Does not help. Same problem in browser console, like on the picture above.

nodkz commented 8 years ago

Resolved!

I think problem was in npm version. Execute in terminal killall node. I remove again all files in node_modules. Reinstall all packages npm install. And now it works! I see after page load lovely message in console [HMR] connected

react-universal-hmr-2

Change Component view, and it was updated in browser without page reload. Change Reducer +1 to +10, and it was updated too. But replay all events from initial state. I think it is not good behaviour, and try explain in a new issue https://github.com/cdebotton/react-universal/issues/7.