Warnings shown when embedding wrapper child components about chat-ui-kit-react HOT 10 CLOSED

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

from chat-ui-kit-react.

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

from chat-ui-kit-react.

@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

from chat-ui-kit-react.

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.

from chat-ui-kit-react.

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"

from chat-ui-kit-react.

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>

from chat-ui-kit-react.

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

from chat-ui-kit-react.

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"
  ]
}

from chat-ui-kit-react.

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

from chat-ui-kit-react.

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

from chat-ui-kit-react.