Blueprint: Overlay using CDN

[3d0]

Bug report

• __Package version(s)__: Core from 1.11 to 1.20, using react-with-addons from 15.3.1 to 15.6.1
• __Browser and OS versions__: Chrome 59

Steps to reproduce

1. Build a simple page with a buildless react (with addons)
2. Add the CDN support of Blueprint
3. add an overlay to the view

Actual behavior

Overlay doesn't appear at all. The console yields error:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of Blueprint.Overlay.

Expected behavior

An overlay appearing?

Evidence

https://jsfiddle.net/yjsb0np9/3/

[adidahiya]

You have a JS error in your console; make sure to include all of Blueprint's dependencies:

Uncaught TypeError: Cannot read property 'className' of undefined
    at unpkg.com/@blueprintjs/[email protected]:2383
    at mapSingleChildIntoContext (npmcdn.com/[email protected]/dist/react-with-addons.js:1021)
    at traverseAllChildrenImpl (npmcdn.com/[email protected]/dist/react-with-addons.js:3759)
    at traverseAllChildren (npmcdn.com/[email protected]/dist/react-with-addons.js:3854)
    at mapIntoWithKeyPrefixInternal (npmcdn.com/[email protected]/dist/react-with-addons.js:1041)
    at Object.mapChildren [as map] (npmcdn.com/[email protected]/dist/react-with-addons.js:1063)
    at Overlay.render (unpkg.com/@blueprintjs/[email protected]:2381)
    at npmcdn.com/[email protected]/dist/react-dom.js:5257
    at measureLifeCyclePerf (npmcdn.com/[email protected]/dist/react-dom.js:4537)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (npmcdn.com/[email protected]/dist/react-dom.js:5256)

[3d0]

I know that, but which one?
if you look my example I added all the libraries (react-with-addons, react-dom, classnames, tether, blueprintjs) and all the css (normalize and blueprint) according to the instructions given here

[adidahiya]

Ah, ok, I see the problem, sorry about that. There are two things going on:

1. Overlay expects a JSX element as its child (it tries to access child.props), not a simple string (easy to fix in your JSFiddle; low priority for us to fix in Blueprint since all real use cases for Overlay will use an element as its only child)
2. React.addons.CSSTransitionGroup is not being picked up correctly as a webpack external in the Blueprint core JS bundle, so when Overlay tries to return a CSSTransitionGroup in its render method, it ends up returning undefined and React gets unhappy. Not sure if this is a webpack bug but it's definitely a bug in CDN consumption. This reference would work if it was root["React"].addons.CSSTransitionGroup:
   

[3d0]

I would like to add that because of this error you cannot use DateRangeInput (or, in fact, any object that depends on an Overlay)

[giladgray]

i'm confident this has been resolved with the latest 2.0 CDN bundles. many folks have gotten it working on codesandbox: #1526