Redux context.store issues

[wildhoney]

Redux context.store issues

[Wildhoney]

@sdtsui Many thanks for this.

import ShadowDOM from 'react-shadow'; doesn't work because:

• ShadowDOM is using React 15.x and ReactDOM 15.x;
• App is using React 0.14.x and ReactDOM 0.14.x;

import ShadowDOM from './react-shadow-compiled.js'; does work because:

• ShadowDOM is using 0.14.x and ReactDOM 0.14.x;
• App is using React 0.14.x and ReactDOM 0.14.x;

(Same applies for import ShadowDOM from './react-shadow.js')

The versions of ShadowDOM change because both React and ReactDOM are defined as externals in Webpack, and so when using the former version it uses the node_modules in the ReactShadow directory (because your package.json don't meet the version requirements), whereas in the latter you're using a local copy and so it takes the versions directly from the create-react-app's package.json.

I updated ReactShadow about 2 months ago for React 15.x and didn't actually realise that it also works for the 0.14.x combination. If it does work, as appears to be the case, then I think we can relax the React and ReactDOM versions even further to support both 14 and 15. However a mixture of both, as we've found out, seems to cause problems, and I suppose rightfully so.

To fix ReactShadow in the create-react-app repo you need to update React and ReactDOM to 15.x.

Nevertheless, I don't think this relates to @nruhe's original issue – that to me sounds like a separate issue relating to adding Redux into the mix. I'll relax the ReactShadow dependency versions and see what transpires.

Thanks for taking the effort to investigate @sdtsui 🍻

[Wildhoney]

@nruhe would be great to get a fiddle for this — could then see what we can do to make things work 👍

[nruhe]

Sure, I'll make some time this weekend. :)

[nruhe]

Update: I swear, this is on my TODO list, I've just been to busy. I'll send you a fiddle as soon as I can.

[sdtsui]

Any updates on this @nruhe ? I might be able to help: running into the same issue.

[Wildhoney]

Folks, for this issue it would be great if one of you could setup a simple JSFiddle please. I can then understand your setup and begin to help 👍

[sdtsui]

@Wildhoney Thanks for replying! What's the best way to setup the fiddle? I don't use fiddles much and I'm not sure how to load react-shadow into the environment, used to using libraries like this with a build process.

I'm also getting the following error, independent of using redux (trying to render at the top of my tree):
react-shadow.js:1369Uncaught TypeError: Cannot read property 'attachShadow' of null(…)

stack trace:

printWarning @ warning.js:36warning @ warning.js:60checkType @ ReactPropTypes.js:134checkPropTypes @ ReactElementValidator.js:178validatePropTypes @ ReactElementValidator.js:208createElement @ ReactElementValidator.js:242Root @ Root.dev.js:16mountComponent @ ReactCompositeComponent.js:148mountComponent @ ReactReconciler.js:37mountComponent @ ReactCompositeComponent.js:225mountComponent @ ReactReconciler.js:37mountComponentIntoNode @ ReactMount.js:266perform @ Transaction.js:136batchedMountComponentIntoNode @ ReactMount.js:282perform @ Transaction.js:136batchedUpdates @ ReactDefaultBatchingStrategy.js:62batchedUpdates @ ReactUpdates.js:94_renderNewRootComponent @ ReactMount.js:476_renderSubtreeIntoContainer @ ReactMount.js:550(anonymous function) @ index.js:11__webpack_require__ @ bootstrap 010f9f7…:553fn @ bootstrap 010f9f7…:84(anonymous function) @ bootstrap 010f9f7…:576__webpack_require__ @ bootstrap 010f9f7…:553(anonymous function) @ bootstrap 010f9f7…:576(anonymous function) @ bootstrap 010f9f7…:576
react-shadow.js:1369Uncaught TypeError: Cannot read property 'attachShadow' of null(…)

I'd love to prepare fiddles (or another format, even a repo) for both if you like. Let me know what you think of the above.

Thanks again,

[sdtsui]

Still trying to get to the bottom of this. I found that the library didn't work for react 14.7, worked for react 15, and didn't work when paired with a tree that used react-redux. This was done by creating a simple create-react-app directory, and rendering a span in the ShadowDOM component. All of these problems were resolved when importing the source file directly (without npm, just a local copy of react-shadow.js.

@Wildhoney Are there any old issues related to the build process or minified version? Let me know if you have any thoughts.

[Wildhoney]

Hmm, even more curious. There's nothing special happening – it's just the normal Babel transpilation. I re-coded this library for React 15.

Does it break when you use the compiled version?

[sdtsui]

Yep, it does.

I've made a repo with the three different imports: npm module, compiled, and source. Feel free to clone down and try yourself. Let me know if you have any questions, or would like this simplified more.

https://github.com/sdtsui/create-react-app/blob/rs/src/App.js

Thanks!

[herodrigues]

I'm facing the same issue and I'm only using React-Redux not Redux-Fractal.

It does not work in the following ways:

• 1st attempt

<ShadowDOM include={['css/common.css']}>
    <Provider store={this.props.store}>
        <div> 
             // [...] stuff here
        </div>
    </Provider>
</ShadowDOM>

• 2nd attempt

<Provider store={this.props.store}>
    <ShadowDOM include={['css/common.css']}>
        <div> 
             // [...] stuff here
        </div>
     </ShadowDOM>
</Provider>

Errors:

• 1st
  

• 2nd
  

I tried to do a fiddle reproducing those errors but I don't know how to use ReactShadow in JSFiddle

[Wildhoney]

@herodrigues thanks – the second attempt is how I'd imagine ShadowDOM to work. I'll investigate the issue when using in conjunction with Redux 👍

[Wildhoney]

Fixed in 86b9ed1