Skip to contentSkip to navigationSkip to topbar
Rate this page:
On this page

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

dependency-updates-in-flex-ui-2xx page anchor

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.

Node

node page anchor

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 does not currently use any features that will introduce breaking changes.

(warning)

Warning

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

Flex 1.x.xFlex 2.x.x (as peer dependency)
"react": "^16.5.2","react": "^17.0.0",
"react-dom": "^16.5.2","react-dom": "^17.0.0",

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.xFlex 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.xFlex 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",

React-router-dom is now based on React v17 Context(link takes you to an external page). If you want to consume the router context from the Flex UI, you need to import withRouter directly from the Flex UI Package.


_10
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.xFlex 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",

Emotion version 11 uses React v17 Context(link takes you to an external page). 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


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

Flex 1.x.xFlex 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(link takes you to an external page), and provide the Flex Theme overrides in the createMuiTheme(link takes you to an external page)arguments(link takes you to an external page).


Run this script to update dependencies

run-this-script-to-update-dependencies page anchor

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.


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


Rate this page: