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

This page explains how to update your dependencies when migrating to Flex UI 2.x.x. For more information about the entire migration process, see Migrate from Flex UI 1.x.x to 2.x.x.

Dependency updates in 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 & React DOM

React & ReactDOM are now peer dependencies.

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

Flex UI 2.x.x requires React v17 as the minimum version and is not guaranteed to work with React v16*.

Flex 1.x.x

Flex 2.x.x (as peer dependency)

"react": "^16.5.2",

"react": "^17.0.0",

"react-dom": "^16.5.2",

"react-dom": "^17.0.0",

Redux & React-redux

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.

Flex 1.x.x

Flex 2.x.x

"react-redux": "~5.1.0",

"react-redux": "^7.2.2",

"redux": "3.7.2",

"redux": "^4.0.5",


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.

Flex 1.x.x

Flex 2.x.x

"react-router-dom": "4.3.1",

"react-router": "4.3.1",

"react-router-redux": "5.0.0-alpha.9"

"react-router-dom": "^5.2.0",

Import Router Context

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.

Flex 1.x.x

Flex 2.x.x

"emotion": "9.2.6",

"@emotion/css": "^11.1.3",

"emotion-theming" : "9.2.6"

"react-emotion": "9.2.6",

"@emotion/react": "^11.1.5",

"create-emotion-styled": "^9.2.6",

"@emotion/styled": "^11.1.5",

Import theme and style

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";

Material 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.

Flex 1.x.x

Flex 2.x.x

"@material-ui/core": "3.9.4",

"@material-ui/core": "^4.11.3",

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 createMuiTheme arguments.

Run this script to update dependencies

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.

npm install \
@emotion/css@^11.1.3 @emotion/react@^11.1.5 @emotion/styled@^11.1.5 \
@material-ui/core@^4.11.3 \
react@17.0.2 react-dom@17.0.2 \
react-redux@^7.2.2 redux@^4.0.5 \
react-router-dom@^5.2.0 \
react-test-renderer@^17.0.2 \
--save --legacy-peer-deps && \
npm uninstall react-router react-router-redux --save
Rate this page:

Need some help?

We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd by visiting Twilio's Stack Overflow Collective or browsing the Twilio tag on Stack Overflow.

Thank you for your feedback!

Please select the reason(s) for your feedback. The additional information you provide helps us improve our documentation:

Sending your feedback...
🎉 Thank you for your feedback!
Something went wrong. Please try again.

Thanks for your feedback!