Update dependencies to be compatible with Flex UI 2.x.x

Flex UI uses a variety of dependencies in order to provide the highest quality user experience for your contact center users. Many of these dependencies have been updated as part of the new major version of Flex.

If you have deployed plugins to modify your instance of the Flex UI, they may be using incompatible versions of many dependencies. Make sure to update your plugin dependencies to be compatible with the Flex UI 2.x.x.

Minimum required Node version was upgraded from 12 to 14.

React & ReactDOM are now peer dependencies.

No changes are required, besides including React & ReactDOM as a dependency. Flex UI 2.x.x does not currently use any features that will introduce breaking changes.

Flex UI 2.x.x does not currently use any features that will introduce breaking changes. If you have used these libraries directly, however, you could experience breaking changes.

The Flex UI relies solely on the react-router-dom dependency. You can update the version and remove the react-router and react-router-redux dependencies.

React-router-dom is now based on React v17 Context. If you want to consume the router context from the Flex UI, you need to import withRouter directly from the Flex UI Package.

import { withRouter } from "@twilio/flex-ui";

Package versions and structure

Emotion has updated their own package structure, so you will need to update both the versions and the package names.

Emotion version 11 uses React v17 Context. If you want to consume styles coming from the Flex UI theme, you need to import withTheme and styled directly from the Flex UI Package

import { withTheme, styled } from "@twilio/flex-ui";

Package versions

Material UI has been updated. Note you'll need to address the changes related to the new major version of this library. If you are using MUI versions earlier than 5.x, you must use the new Flex.setProviders() API to prevent clashes between Flex and Material UI style classes. See the ThemeProvider section for more details.

If you are overriding the Material theme with a Flex Theme, you will need to re-register the MuiThemeProvider in your plugin to use React v17 Context, and provide the Flex Theme overrides in the createMuiThemearguments.

The following script will update all Flex UI dependencies to use 2.x.x dependencies, and remove any unneeded dependencies. It will save these changes in your package.json, and ignore legacy peer dependencies (which can cause issues for users who are currently using NPM v7.0.0 and higher.)

You will still need to update your plugin code to use the new dependencies correctly.

1
npm install \
2
@emotion/css@^11.1.3 @emotion/react@^11.1.5 @emotion/styled@^11.1.5 \
3
@material-ui/core@^4.11.3 \
4
react@17.0.2 react-dom@17.0.2 \
5
react-redux@^7.2.2 redux@^4.0.5 \
6
react-router-dom@^5.2.0 \
7
react-test-renderer@^17.0.2 \
8
--save --legacy-peer-deps && \
9
npm uninstall react-router react-router-redux --save