Cannot nest Flexbox inside Flexbox

zoopoetics / react-svg-flexbox

A React-based Flexbox layout container for SVG elements.

91 stars 9 forks source link

Cannot nest Flexbox inside Flexbox #269

Open jasperlafortune opened 2 years ago

jasperlafortune commented 2 years ago

It seems like nesting a <Flexbox> inside another <Flexbox> would be a pretty common use case for more complex svg layouts, but I get the following error when I try: bundle.js:1 Uncaught TypeError: e.filter is not a function

Minimal code to reproduce (in App.js of a react app): export default const App = () => (<Flexbox><Flexbox></Flexbox></Flexbox>)

silberjan commented 9 months ago

I ran into the same issue. There seem to be 2 problems:

Flexbox cannot deal with only a single child (see https://github.com/zoopoetics/react-svg-flexbox/issues/5)
Flexbox seems not to be able to deal with a directly nested second flexbox component

Workaround:

Make sure more than one Flexbox child is present
Make sure there is no direct Flexbox child (i.e. wrap in <g>)