React Hot Loader doesn't work if React is external (CDN)

[bjfletcher]

Hi there,

Given:

module.exports = {
  externals: {
    react: 'React',
    'react/addons': 'React',
    'react-router': 'ReactRouter'
  }, ...

and:

    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react-with-addons.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react-router/0.11.6/react-router.min.js"></script>

in the html. Then the React Hot Loader doesn't work. I see this in the console:

[HMR] Waiting for update signal from WDS...
[WDS] Hot Module Replacement enabled.
[WDS] App updated. Recompiling...
[WDS] App updated. Recompiling...
[WDS] App hot update...
[HMR] Checking for updates on the server...
[HMR] Updated modules:
[HMR]  - 20
[HMR] App is up to date.

but I don't see the changes getting reflected in the view. It'd work however If I commented out the externals configuration and the script lines in the html (getting webpack to use NPM react packages).

The console output is almost the same as above except that [HMR] - 20 was [HMR] - 19.

Any suggestions on how to debug/fix this would be welcome. Confirmation that anyone has successfully used React Hot Loader with external React resources would be great too.

[gaearon]

Good catch. We depend on internal react/lib/ReactMount.

In your case, it seems that external packages are being used for React itself, but react/lib/ReactMount is taken from NPM package. This doesn't work because they correspond to two independent copies of React. If you delete NPM packages, it should no longer build at all.

I think it would be nice to avoid depending on ReactMount but then we'd need another way to get list of root instances. This could be made injectable by user but I'm not sure if it's worth the complexity.

What practical benefit does it give you to use externals in dev?

[gaearon]

Please see if this works for you:

https://github.com/gaearon/react-hot-loader/blob/master/docs/README.md#usage-with-external-react

Available in 1.0.6.

[bjfletcher]

Hello @gaearon! That's a great turnaround. :)

A reason for asking about this is because, for me, If there's any way to reduce the differences between development and production environments without impacting on their productivity and performance respectively, then I feel that's worth exploring. :)

I wonder if Facebook or the React people have been asked about providing some way of accessing ReactMount with the precompiled version? Worth asking them, do you think?

[gaearon]

As they're aiming for smaller API surface I doubt they'd be inclined to do it.

There is a devtools hook that can be used to get internal objects (React Chrome DevTools uses it), however this hook is meant to only be set once so it's inconvenient and error-prone to try to use it here. I'll raise an issue though.

[gaearon]

Filed as facebook/react#2797

[frankychung]

Just wanted to chime in this works great for our project that has React as an external. Thank you!

[gaearon]

@frankychung I'm glad to hear this!

[gaearon]

Davide, can’t find your comment, have you figured it out, or is Github glitching?

On 03 Feb 2015, at 10:34 , Davide notifications@github.com wrote:

I think this happens even if you use react from npm and you require('react/addons') which is the version with all the addons.
At least it happens to me with react 0.11.1

—
Reply to this email directly or view it on GitHub #53 (comment).

[davibe]

I had a second look. Basically I wanted to require react+addons without modifying my code (its code that works fine with plain require.js and now i am making it work with webpack too). So i set up an alias { 'react': 'react/addons' } in webpack.config.js but if you do that then again react-hot-loader can't find 'react/lib/ReactMount' anymore. Which makes sense. It's just one more case similar to the previous ones.

[gaearon]

Yeah I also bumped into that before. You can actually work around it in a terrible-ish way:

'react': 'react/addons',
// A workaround for react/lib to be resolved correctly:
'react/addons/lib': 'react/../lib',

[davibe]

ahaha, my god. I like the hot realoding thing. Its why i am tryin webpack. But the amount of unclean hacks I had to apply is making me sick. Thank you though, nice one.

[gaearon]

With react-hot-loader@2.0.0-alpha you'll no longer need this Injection nonsense, it will just work.
Please provide any feedback on it in this PR: #182

[gioacostax]

@gaearon but now appears this; if I use ReactDOM to render (the correct way):

ERROR in ./~/react-dom/index.js
/bower_components/react/react.min.js/lib/ReactDOM

[codelegant]

@gaearon In product env, use externals, and the addons had to declare like this const update=React.addons.update. But in dev env, use NPM package, you should import update from 'react-addons-update.
That made me confused, for consistency, I had to use externals in dev.
Is there any solution? I'm waiting online. Thank you.