Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error: Zero-sized element, this should not happen #206

Closed
antoniozzo opened this issue Nov 26, 2020 · 18 comments
Closed

Error: Zero-sized element, this should not happen #206

antoniozzo opened this issue Nov 26, 2020 · 18 comments
Labels

Comments

@antoniozzo
Copy link

Got this error as soon as i switched to the new beta.

Skärmavbild 2020-11-26 kl  16 31 38

@petyosi
Copy link
Owner

petyosi commented Nov 26, 2020

Can you post a repro in stackblitz? I have seen this happening with hot reloading, but it might be something else.

@anuj-shrestha
Copy link

Height of the divs (in your item or group) might have been zero (possibly due to lack of content).

@dmitrizzle
Copy link

Seeing this with Cypress tests

@petyosi
Copy link
Owner

petyosi commented Dec 10, 2020

@dmitrizzle - can you post a repro?

@dmitrizzle
Copy link

@petyosi unfortunately, I can not, it's a private one. I can only say that this isn't happening during normal workflow in either prod or dev mode (latest Chrome on macOS 10.14.6). I run a Next.js and am implementing Virtuoso like this:

 <Virtuoso
      initialItemCount={rows.length}
      itemContent={index => rows[index]}
      onScroll={onScroll}
      overscan={1000}
      ref={listRef}
      totalCount={rows.length}
    />

My implementation makes use of "search" (really a browser-based filter on a list of items) and thus changes rows content rather often. It also mounts/dismounts <Virtuoso /> in between changes to rows.

@GuillaumeAmat
Copy link

Hi @petyosi, here is a reproduction when using @reach/tabs: https://codesandbox.io/s/react-virtuosoissues206-r6l5j

As you can see, all the items can only have a proper render output, but the error pops at every tab switching.

@tutts
Copy link

tutts commented Dec 17, 2020

I have the same issue and my scenario is similar to @dmitrizzle as its a live dashboard, so frequently updates.

I'm unfamiliar with the codebase right now, but i'm in the process of debugging the issue as I really want to use this library, from what I've found so far the problem stems from the fact I pass the index to the row, which I use to connect to redux to pull more information, if this information is removed from the store, then I render a null instead.

example:

const MissionRows = () => {
  const { width, height } = useWindowSize()
  const missionIds = useSelector(getFilteredMissionIds)

  if (!Array.isArray(missionIds) || !missionIds.length) return null

  return (
    <Virtuoso
      style={{ height, width }}
      totalCount={missionIds.length}
      overscan={{ main: 2, reverse: 2 }}
      itemContent={index => <MissionRow missionId={missionIds[index]} />}
    />
  )
}
export const MissionRow = ({ missionId }) => {
  const mission = useSelector(state => getMissionById(state, missionId), shallowEqual)

  if (!mission) return null

  return (
    <MissionRowUI key={missionId} missionId={missionId} marked_for_action={mission.marked_for_action}>
      <Columns missionId={missionId} />
    </MissionRowUI>
  )
}

when that mission no longer exists in store redux will remove it from that row as you can see in the DOM here:

image

so a quick workaround for the time being is to return a <div> with content instead of null, it will then be removed upstream when the ids change and cause a re-render, and so will pass the size check in the hook.

export const MissionRow = ({ missionId }) => {
  const mission = useSelector(state => getMissionById(state, missionId), shallowEqual)

  if (!mission) return <div>this actually won't be seen</div>

  return (
    <MissionRowUI key={missionId} missionId={missionId} marked_for_action={mission.marked_for_action}>
      <Columns missionId={missionId} />
    </MissionRowUI>
  )
}

@petyosi
Copy link
Owner

petyosi commented Dec 17, 2020

@tutts rendering null is not supported.
@GuillaumeAmat, thanks for the repro, I will look into fixing that over the weekend and release a patch.

@tutts
Copy link

tutts commented Dec 17, 2020

whoops! 🤦🏼‍♂️ yep nailed it -> "could be due to some exotic integration scenario" 😆

thanks for the heads up @petyosi, best of luck with the patch!

@github-actions
Copy link

🎉 This issue has been resolved in version 1.1.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@GuillaumeAmat
Copy link

It's working great here, thanks for the quick fix @petyosi 👌

@dmitrizzle
Copy link

Still happens within Cypress tests with 1.1.0

@fayez-nazzal
Copy link

Still happens in version 2.6.0, applying the following example with react-beautiful-dnd:
https://virtuoso.dev/react-beautiful-dnd/

There is a comment 'check style.css for the height-preserving-container rule' though the rule does not exist in styles.css when opening the following sandbox:
https://codesandbox.io/s/lsxev?file=/styles.css

@fayez-nazzal
Copy link

My bad!, Fixed it just by adding a height to 'HeightPreservingItem'.

@Aravindh-SNR
Copy link

@petyosi Is there a way to disable the error log for zero-sized elements? I need such elements for my use case and things are working as intended, but the console is filled with these logs and it would be great without them.

By the way, the library is awesome. Thanks a ton for the great work!

@petyosi
Copy link
Owner

petyosi commented Jan 4, 2024

@Aravindh-SNR - no, it does not work. Several things are subtly broken, and you should not work around that. Filter your data to exclude the items you don't want to render.

@Aravindh-SNR
Copy link

Aravindh-SNR commented Jan 4, 2024

@petyosi I see, thanks for the reply.

I have rows that can be expanded to show nested rows. I render the cell in nested rows conditionally, i.e. when the parent row is expanded, the cell is rendered. When it is collapsed, the nested row is empty.

Like you said, I could filter to exclude/include the nested row itself but then I'd be changing the entire state (data) causing everything to re-render, which I'm trying to avoid.

Sorry to circle back but do you have any thoughts on this scenario?

@OneTuskedMario
Copy link

@Aravindh-SNR did you ever find a solution to this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

9 participants