volto-block-toc 3.0.7 causes fatal javascript error on pages with column blocks containing two or more headers

[kenmanheimer]

As of version 3.0.7 I'm unable to view pages that includes the volto-block-toc and a @eeacms/volto-columns-block (currently 6.3.3) containing more than one text header.

• The problem happens when running with a fully built Docker image or yarn start when using volto-block-toc 3.0.7.
• The problem does not happen when using the same build with volto-block-toc 3.0.6 or 3.0.5.
• All this is in the context of Volto 16.22.2 and Plone 6.0.6.

If a page on your site already contains a volto-block-toc and a volto-columns-block with more than one header you are unable to visit or edit it. This is a showstopper problem. You can work around it by building with volto-block-toc 3.0.6, but that is not a good long-term solution.

(Though the problem does not happen when the columns block contains only one header total, ironically that header is still not listed in the volto-block-toc per #15.)

To produce the problem:

• Create a new page
• Include volto-block-toc
• Include volto-columns-block
• In a text block in the volto-columns-block create some text and select it so you can change it into a header
• In another text block in the some volto-columns-block include some more text and select it so you can change it into a header.
  • The interface will fail with a javascript stacktrace. (My stacktrace is for minified javascript but I include a browser developer's console informative stacktrace below.)
  • The second text block could be in another column in the same column block, but not in a separate columns block.

Browser developer's console informative stacktrace

Here's a stacktrace from the browser developer's console that's produced when turning text in a volto-columns-block into the second header:

react-dom.production.min.js:216  TypeError: i.trim is not a function
    at TocView.jsx:59:19
    at Array.forEach (<anonymous>)
    at TocView.jsx:54:21
    at Array.forEach (<anonymous>)
    at TocView.jsx:34:23
    at TocView.jsx:95:57
    at Object.Mi [as useMemo] (react-dom.production.min.js:168:377)
    at t.useMemo (react.production.min.js:23:113)
    at TocView.jsx:91:28
    at si (react-dom.production.min.js:157:137)

TocView.jsx suggested to me that volto-toc-block is implicated in the problem, and establishing that the problem doesn't happen when using the same build except for changing volto-toc-block to 3.0.6 or 3.0.5 clinches the case.

Versions details

As I mention above, I'm running Volto 16.22.2 and Plone 6.0.6, and @eeacms/volto-columns-block 6.3.3. I can provide my full site setup versions info if you're unable to provoke the problem with just this info.

[kenmanheimer]

Any plans to investigate this problem? It may be crippling websites that use volto-block-toc 3.0.7.