CODEWITHSUNDEEP
typescripttwiliotwilio-flex
Katsumi Takahashi
Katsumi Takahashi

Reputation: 33

How can I avoid a TypeScript error with FlexPlugins?

When I create a TypeScript project (Flex UI 2.x) using the Twilio Flex Plugin CLI, I get an error in the code that is created as a template.

TypeScript error in /Users/katsumi/Documents/workspace/twilioFlex/plugin-typescript-yarn/src/components/CustomTaskList/CustomTaskList.tsx(16,6):
Type '{ children: Element; theme: "default"; }' is not assignable to type 'IntrinsicAttributes & ThemeProviderProps'.
  Property 'children' does not exist on type 'IntrinsicAttributes & ThemeProviderProps'.  TS2322

    14 |
    15 |   return (
  > 16 |     <Theme.Provider theme="default">
       |      ^
    17 |       <Alert onDismiss={dismiss} variant="neutral">
    18 |       <Text as="span">This is a dismissible demo component.</Text>
    19 |       </Alert>

The commands used for setup are as follows. And I used twilio-cli/3.6.0 darwin-x64 node-v16.16.0 and @twilio-labs/plugin-flex 5.1.2

twilio flex:plugins:create plugin-typescript-yarn -s -i -y --flexui2

I think the problem is on the Twilio Paste side, but does anyone have a solution?

Upvotes: 0

Views: 366

Answers (1)

Tristan Blackwell
Tristan Blackwell

Reputation: 222

I believe this is related to the types versions for React and React Dom. Flex has a peer dependency for React as * which currently resolves to React 18.

Twilio Flex however should be using v17. You can try adding the following to your package.json

 "resolutions": {
    "@types/react": "17.x",
    "@types/react-dom": "17.x"
  }

Then delete your node modules and package lock and re-run npm install or yarn to install the modules and see if this fixes the issue. It should tie down the React version to 17.

Upvotes: 2

Related Questions