Support React 18 + TypeScript

[kelvin-thinkbean]

What happened and what did you expect to happen?

After upgrading to React 18 in my Typescript project, I experienced several type related issues. This is because of the decision of the React team to remove implicit children (see https://github.com/DefinitelyTyped/DefinitelyTyped/pull/56210).

There is a codemode provided which basically wraps all the props with React.PropsWithChildren<YourProps> which could come in handy for you.

Have you reviewed our existing documentation?

• [X] Amazon Chime SDK for JavaScript GitHub issues
• [X] Amazon Chime SDK React Components Library GitHub issues
• [X] Storybook documentation
• [X] README page
• [X] How-to documentation
• [X] React SDK meeting demo

Reproduction steps

• Upgrade to React 18 in a TypeScript project
• Notice how the MeetingProvider (and several other elements) have type issues related to the React team's decision to remove implicit children from the FC type.

Amazon Chime SDK React Components Library version

3.0.0

What browsers are you seeing the problem on?

N/A

Browser version

N/A

Device Information

N/A

Meeting and Attendee ID Information.

No response

Browser console logs

N/A

Add any other context about the problem here.

No response

[devalevenkatesh]

Thanks for reporting this issue. We will provide more updates as we make progress. But for now we are tracking this internally.

[everscending]

@kelvin-thinkbean amazon-chime-sdk-component-library-react peer dependencies include react v17. Did you use --force or --legacy-peer-deps to get react v18 installed?

[beefancohen]

@devalevenkatesh are there immediate plans for upgrading the peer dep? it is blocking us from upgrading. thanks for a great lib!

[devalevenkatesh]

Hi @beefancohen ,

Thank you for trying out the library. Unfortunately, I am sad to tell we have not yet prioritized due to other priorities. I will keep this issue updated once we have an update. Thanks again!

[beefancohen]

@devalevenkatesh thank you! would you accept a PR perhaps?

[devalevenkatesh]

Yes, definitely would like that. Though, there are multiple problem with React 18 upgrade for us and time consuming to fix. Below are the things we need to update in order:

1. Storybook's @storybook/addon-knob is deprecated now and uses react 17, hence we have to move to use @storybook/addon-controls.
2. react-popper and @popper/code-js need to be updated to 2.7.0. Check and test if PopOver or related components function properly which use react-popper.
3. Update react, react-dom, @types/react, @types/react-dom to ^18.0.0 version.
4. children should now be added as an explicit prop on all components using or rendering children elements.
5. Also, not sure, but there are changes to useEffect cycle as well so have to test each and every component from that standpoint.

We did some progress and realized there're more than 70+ *.stories.tsx of UI Components need to be migrated from @storybook/addon-knob to @storybook/addon-controls.

Example: https://github.com/aws/amazon-chime-sdk-component-library-react/commit/ec959964af0cbfba7729ba294657c909e3f60d4f

[beefancohen]

awesome ty... posting the migration instructions for storybook here for posterity: https://github.com/storybookjs/storybook/blob/next/code/addons/controls/README.md#how-do-i-migrate-from-addon-knobs

[xuesichao]

The major issue for migrate to @storybook/addon-controls is that we need to update all our stories to arg based, the auto-generated args doesn't work well for our stories, so we have to manually do that.

[iquirino]

+1

[Robertorc83]

Still having the same problem with the last update (3.4.0), is there any workaround for this?

[osamabinsaleem]

with react 17, I'm getting this issue with MeetingProvider, version 3.4.0

Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes & Props'.ts(2559)

[devalevenkatesh]

Thanks for reporting @Robertorc83 and @osamabinsaleem . This is not a bug with the library rather React 18 is not supported yet with amazon-chime-sdk-component-library-react. Unfortunately we do not have a time frame to report on the progress yet, please check previous comment for more details.

[dmoughabghab]

+1 Please. Is there any timeframe as of yet?

[woohelps]

+1 Please. Is there any timeframe as of yet?

[dmoughabghab]

I made a version where I got rid of story book altogether and did all the adding children prop to components work and it builds successfully, do you want me to commit a branch where items 2, 3 and 4 are done?

[dmoughabghab]

I published this version which is working on react 18 https://www.npmjs.com/package/chime-sdk-react-unoffical-18 I cut many corners making this and am only testing it and updating it based on my needs, use at your own risk

[gvnavin]

+1

have been facing some issue in chime front end integration, and I am trying to use any tag from Amazon chime SDK component library react getting error.

Example tag : <VideoTile nameplate="Test name"/>

Chime version : "amazon-chime-sdk-component-library-react": "^3.4.0", "amazon-chime-sdk-js": "^3.9.0"

dependencies version : "react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router": "^6.3.0",
"react-router-dom": "^6.3.0",

[gvnavin]

We built all our front end app using react 18. Since chime is not supported in react 18, we need to do lot of work around like creating a separate react app to compile down it to simple js code and include them in main app inside iframe. It caused lot of churn and delayed the project deliverables. We think that it is going to cause continuous maintanence issues.

I would request the team to prioritize this issue and upgrade the library.

Thank you.

[flozero]

I am actually working on the react 18 implementation. Is it still something people need ? If yes as Its a ton of time consuming. Would you consider participating financially for the project that will implement it or is it something people will except to use freely ?

[flozero]

Just so you know. I have started a react 18 implementation of it. If you want to read more and support the project please take time to star the project or support via github sponsor. I will make sure to keep the readme updated

https://github.com/flozero/react-18-chime-js-sdk

[Amethystix]

For our use case, our team has been keeping a local fork of this repo updated to React 18. I'd like to start using the official package again and get this out of our monorepo.

Would be happy to take some time to fix the knobs + add the updates by this weekend. This library is integral to us, so I figure I can give back a little here.

[flozero]

@Amethystix I have migrate everything into react 18 syntax here https://github.com/flozero/react-18-chime-js-sdk

You can install the package react-18-chime-js-sdk. I am finishing integrating this in my personal project and will offer this project to take backt he ownership if someone end up answering :)

[devalevenkatesh]

Thank you for your efforts in upgrading the library @Amethystix and @flozero and very sorry for delay in response to this. Currently, we are looking into the changes and working on a migration plan. If you have done significant work on knobs as well as all components we would appreciate if you could share the links, we would be happy to include your contributions as well as consider them as we plan to migrate.

Unfortunately, we still do not have a final plan and date to address this, we will communicate so once we have it.

[flozero]

Thanks for answering @devalevenkatesh .

So far my repo have eveyrthing migrate into react 18 that include:

• sdk
• ui
• all the providers

I found some potential issues that need to be investigate like background blur. But as we don't have the full plan from the aws chime I would guess its probably related to this.

I didn't add back the storyblok preview. But it something I can do. Would be happy to discuss with you more and show you the work if you are interested.

[xuesichao]

Hi there, we wanted to give you an update on our react 18 support. We have recently updated our SDK to support React 18 in the react-18 branch of our GitHub repository, which you can find here: https://github.com/aws/amazon-chime-sdk-component-library-react/tree/react-18. While we are still in the process of migrating our storybook, the SDK itself has been fully upgraded.

Before we officially release this change, we would love to receive your feedback on this update. We appreciate any comments or suggestions you may have.

If you would like to give it a try, here're the steps:

• check out react-18 branch and generate the tarball:

  git clone [email protected]:aws/amazon-chime-sdk-component-library-react.git
  git checkout react-18
  npm install
  npm run build
  npm pack
  

• copy and paste the generated tarball in your project and install it

  npm install amazon-chime-sdk-component-library-react-3.6.0.tgz
  

• play with your project and see if it breaks anything.

Thank you for your support and patience!

[xuesichao]

Hi all, we just published [email protected] to npm. We added support for React 18 in this v3.7.0 version. Thanks again for your support and patience!

I'll close this issue for now, let us know if you run into any issue.