search

60frames / webpack-hot-server-middleware

:fire: Hot reload webpack bundles on the server
MIT License
324 stars 50 forks source link

React Redux store not found in context #84

Closed cdoublev closed 5 years ago

cdoublev commented 5 years ago

Hello,

I have an issue with the latest version of react-redux (v6.0.0) by using this package for SSRing in development. One of its maintainers suggested that the issue is coming from how this package is requiring the serverRender chunk, ie. via require-from-string I presume. In my previous research, I already saw that the context was server side rendered as empty.

As I saw that you also have a React/Redux boilerplate repository, do you have any thoughts on this?

richardscarrott commented 5 years ago

@cdoublev looks like React is behaving differently when bundled with Webpack target 'node' vs running directly in Node -- if you add 'react' to your externals 'keep' array in your Webpack config it fixes it.

Pretty certain it's unrelated to require-from-string as last time I looked that works exactly the same way as require but without the restriction of reading from disk...

richardscarrott commented 5 years ago

I've got a hunch it's something to do with multiple instances of React and context -- although I'd have thought marking it as external would ensure there is just a single instance.

cdoublev commented 5 years ago

Thank you for the feed back. It led me to the right place, I think.

The logic below for Context differs depending on PROD or DEV mode. In DEV mode, we create a separate object for Context.Consumer that acts like a proxy to Context. This proxy object adds unnecessary code in PROD so we use the old behaviour (Context.Consumer references Context) to reduce size and overhead. The separate object references context via a property called "_context", which also gives us the ability to check in DEV mode if this property exists or not and warn if it does not.

I'm still wrapping my head for what it entirely means, but in the meantime, using React directly from NodeJS is a working and totally acceptable solution. Thank you a lot!

Edit: ok, this is what you actually mean by "React is behaving differently when bundled with Webpack target 'node'", ie. the PROD package is used even if we run NODE_ENV=development node server/index.js.

cdoublev commented 5 years ago

This was an error on my Webpack config. I had mode: 'production' set for the server build, which was setting NODE_ENV to production. Thank you again! :)