Warnings shown when embedding wrapper child components

[nzayatz14]

Hi again,

This is not really an issue but more of an opinion. I've noticed some warnings are being shown when embedding "invalid" child elements into some components. Something like:

Warning: Failed prop type: "MyMessage" is not a valid child for MessageList. Allowed types: Message, MessageGroup, MessageSeparator, MessageListContent

My issue here is that this warning is shown if I try to wrap my components for custom logic or even just for cleaner code. For example, the following component would throw this warning.

const MyMessage = (props: MessageProps) => {

    const {} = props;

    //some custom logic here

    return (
        <Message {...props} />
    );
};

Are these warnings shown on the production build as well? Or only the dev build?

Thanks!

[supersnager]

Hi @nzayatz14,
you need to use the as parameter.
This is described here: https://chatscope.io/storybook/react/?path=/story/documentation-recipes--page#changing-component-type-to-allow-place-it-in-container-slot
and here: #12

[nzayatz14]

Ahh interesting, thank you.

For anyone that may come across this while struggling with the as prop in typscript, here's an example of how to add this prop to your component: https://gist.github.com/kripod/4434e7cecfdecee160026aee49ea6ee8

You could also just pass the as prop as a string type but then you will not have any checking for if your string is a valid ElementType

[nzayatz14]

Another heads up that may be related to this @supersnager. I noticed that when I build for production, it looks like the custom components I have do not show up. I created separate components for my conversation header and input container of my chat.

The dev build looks like:

Whereas the production build shows:

Any ideas? I feel like the components may be doing something wonky with the getChildren function and Typescript may be having some issues with it.

[supersnager]

Hey @nzayatz14,
it's difficult to say without the code, but I have some suspicions.

If you are using the as parameter with the type:

as={ConversationHeader}

try to use a string instead:

as="ConversationHeader"

[nzayatz14]

I actually passing the string currently. Heres a skeleton of my component

<ChatContainer>
    <ChatHeader
        as='ConversationHeader'
       //other props
    />

    //MessageList and messages

    <ChatInputToolbox
        as='InputToolbox'
        //other props
    />
</ChatContainer>

[supersnager]

@nzayatz14 How you build your app for production? You are using CRA or something else?

[nzayatz14]

Yes, just using create-react-app so pretty standard I'd imagine. Also heres my tsconfig if this helps

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "noFallthroughCasesInSwitch": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "."
  },
  "include": [
    "src"
  ]
}

[nzayatz14]

@supersnager so after digging into this a bit, it looks like your getChildren function is relying on the code to not be minified. However, the ConversationHeader and InputToolbox get minified on the production build, whereas the MessageList and MessageInput components do not. I believe this has something to do with MessageList and MessageInput being class based and ConversationHeader and InputToolbox being function based components.

Heres an example of the minified vs unminified classes:

Minified ConversationHeader component:

Non-minified MessageInput component:

So, in your getChildren function when you are looping through the types to get the strTypes here:

var strTypes = types.map(function (t) {
    return t.name || t.displayName;
  });

Your result is not quite what you'd expect:

Not sure how you want to move forward with this information, but what I've seen from most packages that have specified child props is they will throw a warning on the development build saying something like This is not a valid child element of MyComponent, expecting MyChildComponent or MySecondChildComponent. But on the production build, they will just ignore it and let it happen, not remove items that are not "supposed to be there."

Hope this helps

[supersnager]

@nzayatz14 Please check the 1.8.1 version, and let me know if it works for you.

[nzayatz14]

@supersnager this appears to fix the production build issue, thanks!