Hot reload with React.js

sikanx · September 28, 2015, 9:28pm

I have been just using import css on the top of the component file(before you define the component),

import './Component.css';

export class Component extend React.Component{
   ...
}

is that different from loading it in componentWillMount()?

mats · September 28, 2015, 9:49pm

I made a shallow test in windows, it worked
2 Issues i found:

Folder-Names should not contain spaces
if i change a file (e.g. TodoHeader) i have to refresh browser, maybe i miss something ?
Thanks

benoitt · September 28, 2015, 11:31pm

Yes it is different. When you require your CSS inside a React component, their is something special that happens on the client and on the server.

On the client, the first time this component is mounted, the CSS will be inserted inside the page. Their is no need for it before and it slows down the browser (not that big of a deal).

On the server, it allows a CSS collector to knows what is the CSS that you need and serve it with the server-rendering. This is fixing the flash of unstyled content you would have until your app is rendered.

This is not the only way to go by the way. You can use Radium or jsxstyle to inline all your CSS. You can put all your CSS inside a client folder inside Meteor and it will take care of serving it. You can use CSS modules and have local classes.

This project is not designed to force you into any tech. It is to give you a quick nice setup. It uses what I love using but it is also though out to be enough flexible to be changed by what you love.

benoitt · September 28, 2015, 11:46pm

I should probably add quotes you’re right

This is unfortunally a limitation of hot reload. Not a big deal in my opinion, I don’t think you spend your days renaming files

Good to know it works thank you!

benoitt · September 29, 2015, 3:28am

Everyone should make sure to update reactrouter:react-router-ssr. A protection against data leaking has been added. Now, you can’t get collections that has not been published (unless you have autopublish of course).

This will make sure the server-rendering is not sending data that your client is not supposed to know about.

mats · September 29, 2015, 8:22am

No i meant changing something in the file, not the filename…If i remember correctly on mac it automatically refreshed the browser window (but not sure though)

benoitt · October 1, 2015, 10:07am

This is not normal. I’ll try to take a look on Windows

benoitt · October 1, 2015, 10:08am

Huge improvement this morning: webpack is running in a different node process so that it doesn’t need to recompile on every Meteor restart!

none · October 1, 2015, 12:59pm

Not working after update…Clear project, npm install and ./scripts/run-dev.sh:

events.js:72
    throw er; // Unhandled 'error' event
          ^
Error: listen EADDRINUSE
 at errnoException (net.js:905:11)
 at Server._listen2 (net.js:1043:14)
 at listen (net.js:1065:10)
 at Server.listen (net.js:1139:5)
 at Object.<anonymous> (/home/none/MeteorApps/Test/kickstart/webpack/dev-server.js:18:24)
 at Module._compile (module.js:456:26)
 at Object.Module._extensions..js (module.js:474:10)
 at Module.load (module.js:356:32)
 at Function.Module._load (module.js:312:12)
 at Function.Module.runMain (module.js:497:10)
[[[[[ ~/MeteorApps/Test/kickstart/meteor ]]]]]

=> Started proxy.                             
=> Started MongoDB.                           
=> Started your app.                          

=> App running at: http://localhost:3000/

But no Todo App in brawser and in console:

GET http://localhost:3500/assets/main.js
ignoring http://localhost:3000

mats · October 1, 2015, 1:32pm

Yeah, tried again with newest version on Windows 7 it worked ,
(Windows 10 did not work, but have to test again).

Thanks

none · October 1, 2015, 1:35pm

On Linux, in my case, not working too (-:

benoitt · October 1, 2015, 2:01pm

Do you have anything running on port 3500? I though it was a pretty good port nobody was using

none · October 1, 2015, 2:13pm

OK, webpack/node used…But now:

./run-dev.sh
[[[[[ ~/MeteorApps/Test/kickstart/meteor ]]]]]

=> Started proxy.
webpack built 3af3c66a92ae888e72de in 2365ms -
=> Started MongoDB.
Hash: 3af3c66a92ae888e72deons |
Version: webpack 1.12.2
Time: 2365ms
Asset Size Chunks Chunk Names
main.js 304 kB 0 main
chunk {0} main.js (main) 104 kB [rendered]
[0] multi main 40 bytes {0} [built]
[1] …/~/webpack-hot-middleware/client.js?path=http://localhost:3500/__webpack_hmr 3.11 kB {0} [built]
[2] …/~/webpack/buildin/module.js 251 bytes {0} [built]
[3] …/~/webpack-hot-middleware/~/strip-ansi/index.js 161 bytes {0} [built]
[4] …/~/webpack-hot-middleware/~/strip-ansi/~/ansi-regex/index.js 145 bytes {0} [built]
[5] …/~/webpack-hot-middleware/client-overlay.js 917 bytes {0} [built]
[6] …/~/webpack-hot-middleware/process-update.js 2.75 kB {0} [built]
[7] …/react/index.jsx 537 bytes {0} [built]
[8] external “ReactRouter” 42 bytes {0} [not cacheable]
[9] …/react/App.jsx 3.37 kB {0} [built]
[10] …/~/react-transform-hmr/lib/index.js 3.69 kB {0} [built]
[11] …/~/react-transform-hmr/~/react-proxy/modules/index.js 413 bytes {0} [built]
[12] …/~/react-transform-hmr/~/react-proxy/modules/createClassProxy.js 5.8 kB {0} [built]
[13] …/~/react-transform-hmr/~/react-proxy/modules/createPrototypeProxy.js 5.25 kB {0} [built]
[14] …/~/react-transform-hmr/~/react-proxy/~/lodash/object/assign.js 1.62 kB {0} [built]
[15] …/~/react-transform-hmr/~/react-proxy/~/lodash/internal/assignWith.js 943 bytes {0} [built]
[16] …/~/react-transform-hmr/~/react-proxy/~/lodash/object/keys.js 1.3 kB {0} [built]
[17] …/~/react-transform-hmr/~/react-proxy/~/lodash/internal/getNative.js 456 bytes {0} [built]
[18] …/~/react-transform-hmr/~/react-proxy/~/lodash/lang/isNative.js 1.29 kB {0} [built]
[19] …/~/react-transform-hmr/~/react-proxy/~/lodash/lang/isFunction.js 1.06 kB {0} [built]
[20] …/~/react-transform-hmr/~/react-proxy/~/lodash/lang/isObject.js 732 bytes {0} [built]
[21] …/~/react-transform-hmr/~/react-proxy/~/lodash/internal/isObjectLike.js 289 bytes {0} [built]
[22] …/~/react-transform-hmr/~/react-proxy/~/lodash/internal/isArrayLike.js 372 bytes {0} [built]
[23] …/~/react-transform-hmr/~/react-proxy/~/lodash/internal/getLength.js 440 bytes {0} [built]
[24] …/~/react-transform-hmr/~/react-proxy/~/lodash/internal/baseProperty.js 351 bytes {0} [built]
[25] …/~/react-transform-hmr/~/react-proxy/~/lodash/internal/isLength.js 644 bytes {0} [built]
[26] …/~/react-transform-hmr/~/react-proxy/~/lodash/internal/shimKeys.js 1.14 kB {0} [built]
[27] …/~/react-transform-hmr/~/react-proxy/~/lodash/lang/isArguments.js 963 bytes {0} [built]
[28] …/~/react-transform-hmr/~/react-proxy/~/lodash/lang/isArray.js 1.16 kB {0} [built]
[29] …/~/react-transform-hmr/~/react-proxy/~/lodash/internal/isIndex.js 778 bytes {0} [built]
[30] …/~/react-transform-hmr/~/react-proxy/~/lodash/object/keysIn.js 1.66 kB {0} [built]
[31] …/~/react-transform-hmr/~/react-proxy/~/lodash/internal/baseAssign.js 516 bytes {0} [built]
[32] …/~/react-transform-hmr/~/react-proxy/~/lodash/internal/baseCopy.js 545 bytes {0} [built]
[33] …/~/react-transform-hmr/~/react-proxy/~/lodash/internal/createAssigner.js 1.29 kB {0} [built]
[34] …/~/react-transform-hmr/~/react-proxy/~/lodash/internal/bindCallback.js 1.22 kB {0} [built]
[35] …/~/react-transform-hmr/~/react-proxy/~/lodash/utility/identity.js 355 bytes {0} [built]
[36] …/~/react-transform-hmr/~/react-proxy/~/lodash/internal/isIterateeCall.js 906 bytes {0} [built]
[37] …/~/react-transform-hmr/~/react-proxy/~/lodash/function/restParam.js 1.9 kB {0} [built]
[38] …/~/react-transform-hmr/~/react-proxy/~/lodash/array/difference.js 987 bytes {0} [built]
[39] …/~/react-transform-hmr/~/react-proxy/~/lodash/internal/baseDifference.js 1.36 kB {0} [built]
[40] …/~/react-transform-hmr/~/react-proxy/~/lodash/internal/baseIndexOf.js 678 bytes {0} [built]
[41] …/~/react-transform-hmr/~/react-proxy/~/lodash/internal/indexOfNaN.js 657 bytes {0} [built]
[42] …/~/react-transform-hmr/~/react-proxy/~/lodash/internal/cacheIndexOf.js 586 bytes {0} [built]
[43] …/~/react-transform-hmr/~/react-proxy/~/lodash/internal/createCache.js 650 bytes {0} [built]
[44] …/~/react-transform-hmr/~/react-proxy/~/lodash/internal/SetCache.js 706 bytes {0} [built]
[45] …/~/react-transform-hmr/~/react-proxy/~/lodash/internal/cachePush.js 379 bytes {0} [built]
[46] …/~/react-transform-hmr/~/react-proxy/~/lodash/internal/baseFlatten.js 1.29 kB {0} [built]
[47] …/~/react-transform-hmr/~/react-proxy/~/lodash/internal/arrayPush.js 437 bytes {0} [built]
[48] …/~/react-transform-hmr/~/react-proxy/modules/bindAutoBindMethods.js 2.4 kB {0} [built]
[49] …/~/react-transform-hmr/~/react-proxy/modules/deleteUnknownAutoBindMethods.js 2.45 kB {0} [built]
[50] …/~/react-transform-hmr/~/react-proxy/~/react-deep-force-update/lib/index.js 1.29 kB {0} [built]
[51] …/~/react-transform-hmr/~/global/window.js 243 bytes {0} [built]
[52] external “React” 42 bytes {0} [not cacheable]
[53] …/react/todo/TodoApp.jsx 4.89 kB {0} [built]
[54] …/~/react-mixin/index.js 4.57 kB {0} [built]
[55] …/~/react-mixin/~/smart-mixin/index.js 5.86 kB {0} [built]
[56] …/~/react-mixin/~/object-assign/index.js 484 bytes {0} [built]
[57] …/react/todo/TodoHeader.jsx 4.85 kB {0} [built]
[58] …/react/todo/img/check.png 5.21 kB {0} [built]
[59] …/react/todo/TodoList.jsx 3.63 kB {0} [built]
[60] …/react/todo/TodoItem.jsx 5.1 kB {0} [built]
[61] …/react/todo/TodoApp.css 925 bytes {0} [built] [1 error]
[63] …/~/style-loader/addStyles.js 6.09 kB {0} [built]

ERROR in …/~/css-loader!../react/todo/TodoApp.css
Module build failed: ReferenceError: Promise is not defined
at LazyResult.async (/home/none/MeteorApps/Test/kickstart/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:152:31)
at LazyResult.then (/home/none/MeteorApps/Test/kickstart/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:75:21)
at processCss (/home/none/MeteorApps/Test/kickstart/node_modules/css-loader/lib/processCss.js:174:5)
at Object.module.exports (/home/none/MeteorApps/Test/kickstart/node_modules/css-loader/lib/loader.js:22:2)
@ …/react/todo/TodoApp.css 4:14-81 13:2-17:4 14:20-87
=> Started your app.

=> App running at: http://localhost:3000/

benoitt · October 1, 2015, 2:16pm

I bet you have locally node 0.10, am I right? css-loader doesn’t seem to work under node 0.12. They haven,t set a polyfill for Promise and it wasn’t existing at that time.

Try to upgrade it.

none · October 1, 2015, 2:17pm

$ node --version
v0.10.40

Everything worked several hours ago…

ansyg · October 1, 2015, 2:20pm

I have such error after run ./scripts/run-dev.sh

module.js:340
    throw err;
          ^
Error: Cannot find module 'debug'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (/home/ansyg/projects/playground/kickstart/node_modules/connect/index.js:16:13)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)

benoitt · October 1, 2015, 2:20pm

You can revert to an older css-loader version and follow https://github.com/webpack/css-loader/issues/144. Most people seem to upgrade to a newer version of Node.js.

benoitt · October 1, 2015, 2:21pm

Connect is probably missing in your node_modules. Make sure it is installed.

none · October 1, 2015, 2:36pm

Everything is OK with node v4.1.1 (-:

mats · October 1, 2015, 2:54pm

@benoitt I would love a Blaze-version of this project, too (if possible )