Alert component causes js console error about baking-soda

[gadfly361]

@jeffmad Thanks for submitting this issue! I am able to reproduce it.

At first glance, I am not sure how to resolve, but I will take a closer look soon.

[pesterhazy]

I've seen this kind of issue when using webpack to generate a standalone bundle for a react-based library. I frequently run into these kinds of issues when:

• I mess up with webpack's config: the external and library options are useful
• reagent comes with its own version of react, and I forget to exclude it.
• or I mess up excluding it, because some other library also depends on cljsjs/react
• same for cljsjs/react-dom and cljsjs/react-with-addons
• loading order matters, window.React needs to be set early enough

some things to try:

• check window.React.version and window.ReactDOM.version from chrome's console. Do they match your expectations?
• webpack can be made to export multiple libs, by using a custom entry file entry.js containing window.React=require("react"); window.ReactDOM=require("react-dom");
• use lein deps :tree to verify expectations about dependencies loaded

[pesterhazy]

Essentially I think the warning message is on to something, i.e. there may actually be two competing React versions in play here.

[gadfly361]

@pesterhazy Thanks for the response! I'll try what you recommended soon :)

[jeffmad]

for my minimal app that exhibits the issue:

window.React.version and window.ReactDOM.version are both "15.4.2"

lein deps :tree
[baking-soda "0.1.3" :exclusions [[cljsjs/react]]]
[cljsjs/react-bootstrap "0.30.7-0"]
[cljsjs/bootstrap "3.3.6-1"]
[cljsjs/jquery "1.9.1-0"]
[cljsjs/reactstrap "4.2.0-1"]
.....
[cljsjs/react-dom "15.4.2-2" :exclusions [[cljsjs/react]]]
[cljsjs/react-with-addons "15.4.2-2"]
[reagent "0.6.2" :exclusions [[cljsjs/react]]]
[cljsjs/react-dom-server "15.4.2-2"]

This looks correct to me, although I admit I have limited understanding. reagent, cljsjs/react-dom, and baking-soda all have exclusions on cljsjs/react

I will make time to look into the entry.js idea.

[pesterhazy]

@jeffmad, I tried your minimal example and could reproduce the issue. Unless I'm mistaken, the problem is that the bundle pulled from cljsjs/reactstrap includes its own versions of react and react-dom

I discovered this by looking at the source tab of the chrome devtools, in the cljsjs/reactstrap folder. This file includes definitions of cloneElement (which should be in react only) and ARIADOMPropertyConfig (which should be in react-dom only).

I think this is a bug in cljsjs/reactstrap. This is the dist file that gets pulled in: https://unpkg.com/[email protected]/dist/reactstrap.js. Should reactstrap's dist bundle include all those extra dependencies? Probably not, but not sure.

The solution would be to change the cljsjs package to avoid the unpkg dist bundle and instead to run webpack during the build with a custom config that marks react, react-dom and react-transition-group as external (using the externals config option).

Note that https://github.com/reactstrap/reactstrap/blob/master/webpack.base.config.js#L44 already mentions some externals, so I'm not sure why that doesn't work (the amd/umd etc config options confuse me). Outdated version perhaps?

[pesterhazy]

Even the latest package seems to include the dependencies: https://unpkg.com/[email protected]/dist/reactstrap.es.js so the custom webpack config route is probably the way to go.

[jeffmad]

Thank you for this analysis, you have a lot of knowledge and I appreciate your advice. Impressive.

[jeffmad]

confirmation that @pesterhazy is correct. reactstrap/reactstrap#448 (comment)
... reading up on rollup, glad for clojurescript ...

[gadfly361]

Just wanted to further confirm that what @pesterhazy recommends will resolve the issue that the Alert component produces.

@pesterhazy @jeffmad
Do you think using webpack should be the recommended way to use baking-soda with reactstrap? (I think baking-soda should work fine as is when using react-bootstrap, i.e. bootstrap 3).

[jeffmad]

@gadfly361 I agree that baking-soda should work fine as is. There is a defect open in reactstrap that causes react and react-dom to get bundled. reactstrap/reactstrap#448 Once that issue gets fixed, then baking-soda will be fixed for bootstrap4. However there hasn't been much activity there as of late. Life happens.

My knowledge of the JS build system is too limited to dissect the problem. Looking at rollup.config.js, it seems properly configured to make them external, so I don't know what is causing the issue.

[gadfly361]

@jeffmad This issue should now be fixed in v0.2.0 of baking-soda. However, please feel free to reopen this issue if the problem continues.