Incompatibility when using webpack and reactjs from CDN

[maberer]

This issue may be related to #2. - browserify-shim would end in a similar issue I guess.

It seems that "react-router-component" has a problem when a module bundler (like webpack) is used and reactjs itself is loaded from the CDN via script tag (using webpack's "externals" option --> externals: {"react": "React"})

If "react-router-component" is included in the bundled file, the router fails with "ReactUpdates: must inject a batching strategy" when clicking a component.

I think this happens because "react-router-component" uses parts of the react lib directory like "invariant", "merge"... (thus get included into the bundle too) In this case, certain dependencies seem to be overwritten ("batchingStrategy") - causing duplication issues.

This limits the use of "react-router-component" and I think it would be better to not have requires to the lib directory of reactjs (at least for a distributed component like "react-router-component").

How does this problem arise?
I did not find a way to use "react-quickstart" (https://github.com/andreypopp/react-quickstart) with webpack and reactjs from CDN, but "react-router-component" in the generated bundle... this fails because of the dependencies to "react/lib".

I think the problem can be solved by using other (lightweight) helpers instead of the ones in the react/lib directory... making it dependent of reactjs only (and none of its libs).

[maberer]

@andreypopp Should it be possible to use the "react-quickstart" project with reactjs being loaded from the facebook CDN? I cannot get this working with react-router-component included in my bundle but reactjs from CDN. Does the problem described above make any sense to you?

[icodeforlove]

I have the same process, my larger libraries are built externally from my app.

And I'm using externals in webpack to bypass the require, which results in:

[icodeforlove]

There is a workaround, you can build react like this

var React = require('react/addons');
if (typeof window !== 'undefined') {
    window.React = React;
}
React.Router = require('react-router-component');

here is the compiled version that worked fine for me

[Download]

Yes I am having the same problem. When I include the router, React is also bundled and conflicts with the one from CDN.

@icodeforlove When you say 'you can build react like this', are you referring to building the react library itself? How would this work when including it from CDN?
Can you maybe elaborate? Where does the code you mention go? In the place where you would normally require React in your own code?

[jsg2021]

I'm curious, why would you split react out like that? separate caching policies?

[jsg2021]

@tindli react-quickstart from that link is deprecated. There may be another quick start project.

I believe the React 0.14 branch has made efforts to remove deep dependencies into React's package.

[Download]

@jsg2021 I find it interesting that you refer to it as 'splitting out'... For me it's the reverse; I find it curious that you would want to bundle a library as big and ubiqutous as React with your own code.

I reason that with the hugeness of Facebook and other projects using React, there will actually be a pretty good chance that the React JS code will already be in the user's cache when he reaches my website... As long as I'm using the official React CDN that is. By bundling it with my own components i'm making that caching impossible and al users will have to re-download React every time I update my code.

[Download]

Mmmm I just discovered something weird... I am requiring react-router, not react-router-component... Are these actually two different projects?

[Download]

https://github.com/rackt/react-router This is the one I am using I think... But it has this exact same issue (I came here from Google searching for the solution).

[jsg2021]

yeah, that is a completely different project. :)

Thats a good point about the likelihood of the user having the react library

[Download]

Yeah actually I'm trying to use only libraries from CDN. :)

[prasannavl]

Fix: #169