Getting "TypeError: Cannot read property 'maxSize' of undefined" and no idea how to debug.

[growthwp]

Hi, awesome library, thank you for mainitaning it! I've recreated the demos successfully on CSB and the library works, unfortunately, I can't tell, for the life of me, even if I look at my code and it looks rather rudimentary what I'm doing wrong.

I currently have a ReflexContainer that ingests some ReflexElements and so on, however, as soon as I import - and use the container, I'm hit with TypeError: Cannot read property 'maxSize' of undefined - at ReflexContainer.js:570.

How can we get to the bottom of this? I checked to see if maxSize is something required, but it isn't. No idea why I'm getting this error locally.

However, it seems the library doesn't work on some CSBs:

https://codesandbox.io/s/mystifying-fast-2zs2i?file=/src/index.js:0-252

This is code taken straight up from the demos and it doesn't work. Am I doing something terribly wrong?

---

Clue #1: It seems it's related to what's INSIDE the container. Seems even an a inside the container triggers it. I wonder, am I implementing my children wrong?

<ReflexContainer
  orientation={'horizontal'}
  className={`${styles.row} ${containers ? styles.filled : ''} col-md-12`}
>
  {containers.map((id, i, { length }) => {
    return [
      <Container
        id={id}
        containersInfo={containersInfo}
        setContainersInfo={setContainersInfo}
        position={{ number: i, isFirst: i === 0, isLast: i + 1 === length }}
        key={`container${id}`}
      />,
      <ReflexSplitter propagate={true} />,
    ];
  })}
</ReflexContainer>

And here's my Container:

<ReflexElement
  className={`${styles.container} ${position.isLast ? styles.isLast : ''} ${
    position.isFirst ? styles.isFirst : ''
  } left-pane`}
>
  <div className={'paneContent'}>
    {components ? (
      <div className={styles.components}>
        {components.map((componentId) => (
          <Component key={`component_${componentId}`} componentId={componentId} />
        ))}
      </div>
    ) : (
      <div className={styles.blank}>
        <svg
         //Some SVG stuff. Ignore.
        </svg>
      </div>
    )}
  </div>
</ReflexElement>

I checked the output of that loop inside my container and it's correct, it outputs an element, then a resize handler.

---

Edit 2: Interestigly, making <div>a</div> the child of a ReflexContainer gives the React does not recognize theminSizeprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercaseminsizeinstead. If you accidentally passed it from a parent component, remove it from the DOM element. error.

Not sure what to take away from all of it.

[leefsmp]

So what's missing on your CSB is just to style the containing dom element with, for instance height: 100vh, you could also set a pixel size but not 100% as it will not work. See #44 or #53.

[growthwp]

@leefsmp Ok, that does it, however, it's definitely worrying that you can't work with 100% as that is a default in many cases. A set height is usually a bad idea.

However, as for my main issue, what do you suggest? I still can't practically make it work on local and it's giving me the error.

[leefsmp]

It's not so much an issue, only the root node need to have a non-% height as described in the issues I linked, please read those carefully. You could for example have .document {height: 100vh} and then the reflex container can have height: 100% or 50% ... whatever, I hope it's clear.

I don't get what is the other problem you are talking about, do you have a reproducible sample for that? If it's just on your side, then it probably has to do with some incorrect use, but would be hard to tell you more without a proper sample or description.

[leefsmp]

closing due to inactivity.

[growthwp]

@leefsmp Sorry for the delay, I was so off-put by the issues the library had that I decided to leave it for later on. I found the culprit after a full 2 days of debugging. Take a look:

https://codesandbox.io/s/vibrant-currying-g3g4q?file=/src/App.js:0-981

As you can see, the .map is generating a fragment, now, the code in there isn't exactly as you'd write it but it seems that whenever ReflexElement isn't a direct child of ReflexContainer, things go wrong.

I don't know how I could re-write this. In any other case, this is valid syntax for generating adjacent JSX.

What do you suggest?

---

So, a little bit of digging with a little bit of help reveals that ReflexContainer passes down props through cloneElement, which unfortunately passes down props only one level, as such, an intermediate needs to be created:

https://codesandbox.io/s/cool-kilby-jwohl?file=/src/App.js

Now, it works - it displays the things but now the this.events on ReflexSplitter is unknown, doesn't get set up properly. If you could guide me as to what to pass to this, then perhaps we have a workaround for simple use-cases with fragments.