React error when transforming

[melocule]

Hey! I'm getting a React error when I try to transform while keeping the children. It doesn't appear if I remove all instances of {children} and just render empty components. Interweave parses the HTML properly when it doesn't use a transformer.

I'm on version "interweave": "^13.1.0"

My code:

  function turnTablesResponsive(node: HTMLElement, children: Node[]): React.ReactNode {
    switch (node.tagName) {
      case "TABLE":
        return <Table>{children}</Table>;
      case "THEAD":
        return <Thead>{children}</Thead>;
      case "TBODY":
        return <Tbody>{children}</Tbody>;
      case "TR":
        return <Tr>{children}</Tr>;
      case "TH":
        return <Th>{children}</Th>;
      case "TD":
        return <Td>{children}</Td>;
      default:
        return undefined;
    }
  }

  return (
    <div>
      <Interweave content={cleanNote} transform={turnTablesResponsive} />
    </div>
  );

Stack trace:

react-dom.development.js:23965 Uncaught 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, or you might have mixed up default and named imports.
    at createFiberFromTypeAndProps (react-dom.development.js:23965:21)
    at createFiberFromElement (react-dom.development.js:23988:15)
    at createChild (react-dom.development.js:13628:28)
    at reconcileChildrenArray (react-dom.development.js:13900:25)
    at reconcileChildFibers2 (react-dom.development.js:14305:14)
    at reconcileChildren (react-dom.development.js:16762:28)
    at updateHostComponent (react-dom.development.js:17302:3)
    at beginWork (react-dom.development.js:18627:14)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:188:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237:16)

Am I doing something wrong or is this a bug?

[milesj]

@melocule This is a weird one since the error is undefined. Are you able to pinpoint which element is causing hte problem exactly?

[melocule]

Hey @milesj thanks for the response! I narrowed it down a little, it happens for the THEAD case and none of the others. I got it to work by exploding the children (<Thead>{...children}</Thead>). Not sure why this works, but I'll close this issue