Menu

Expand
Rate this page:

Selecting React versions for Flex

BETA

This Twilio product is currently available as a beta release. Some features are not yet implemented and others may be changed before the product is declared as Generally Available. Beta products are not covered by a Twilio SLA. Learn more about beta product support.

This is a guide on how to select which React and ReactDOM versions your Flex application uses. This allows you to use React’s newest APIs, including React Hooks, when developing your Flex plugins.

During the Beta, you will be able to use two versions of React:

  • 16.13.1 (The latest version at the time of writing)
  • 16.5.2 (default version used by Flex)

Getting Started

You will need a few things before you start using this feature:

  • A Twilio Account - sign up here if you don't have one yet
  • An instance of Twilio Flex - refer to our getting started guide to create one
  • The Flex Plugins CLI - review our introductory document to get familiar with the Command Line Interface for building and deploying plugins

Enabling the feature on your Flex account

You can enable the support for a newer version of React on the Pre-Release features page within Flex Admin.

select_flag.png

Setting the React version within Flex

1. Navigate to the 'Admin' panel, which is the top icon on your sidebar. You must be logged into Flex as a user with the admin role.

Admin Tile

2. Click on the "Developer Setup" tile at the bottom of the page

Developer Setup.png

3. Choose the React version in the drop-down. We currently support the latest version of React (16.13.1) and Flex's current default version (16.5.2).

React_2.png

You are now all set to use and develop locally with the latest version on Flex. Save the Account SID and Auth Token of your account; you will need it when you are deploying your plugin.

Configuring your local environment

Creating a new plugin to use the latest React version

If you plan to use the latest version of React with a new plugin, you need to install the latest version of the Flex Plugins CLI.

Then you can create a new plugin using the standard initialization for the Flex Plugins CLI:

$ twilio flex:plugins:create plugin-sample 

This command will download the default application template that can be used as a starting point for building plugins. When run successfully, a new folder named plugin-sample will be created on your machine.

To update your plugin to use version 16.13.1 for react and react-dom, you'll need to install them first. Install React by running the following command in your newly-created plugin directory:

plugin-sample $ npm install react@16.13.1 react-dom@16.13.1

Verify this step by checking the dependencies section of package.json. The version of react and react-dom on the file should now be set to "^16.13.1".

Finally, execute the following command:

plugin-sample $ UNBUNDLED_REACT=true npm install

You're now set to run and test your Plugin locally using the latest version of React.

Updating a pre-existing plugin to use the latest React version

If your existing plugin is using an older version of the Plugin Builder, migrate your plugin to use the latest version of the Flex Plugins CLI.

Then, update the dependencies in package.json within your plugin to ensure you're using the newer React version:

"dependencies": {
    "craco-config-flex-plugin": "latest",
    "flex-plugin": "latest",
    "flex-plugin-scripts": "latest",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "latest"
}

Delete the node_modules directory and package-lock.json in the plugin directory.

Finally, re-install the node modules for the plugin:

plugin-sample $ UNBUNDLED_REACT=true npm install

You’re now set to run and test your Plugin locally using the latest version of React.

You must include the UNBUNDLED_REACT=true argument in all your commands (that also includes when you run your plugin locally via npm start) in order to use this feature. You can also set this as an environment variable within your development environment.

Building and Deploying Plugins

Once you are ready to deploy your plugin to Flex, run the following commands from within your plugin directory:

plugin-sample $ UNBUNDLED_REACT=true twilio flex:plugins:deploy --major --changelog "Using the latest version of React"

Finally, enable your plugin on your application by running the following command:

$ twilio flex:plugins:release --plugin plugin-sample@1.0.0 --name "Plugin Sample Release" --description "Testing React upgrade"

The plugin will be successfully deployed if the following conditions are met:

  1. Your Flex instance is on version 1.19 or above
  2. The version of React used to build the plugin is less than or equal to the version selected within the Flex Admin UI

Congratulations - your Plugin should now be deployed!

You can confirm whether your plugin is enabled by logging into Flex, visiting the Plugins Dashboard, and viewing the plugin under the 'Installed Plugins' section.

FAQ

Which versions of React does Flex currently support?

During the Beta, Flex only supports the latest version of React (16.13.1) and the default version used by Flex (16.5.2).

What happens if I select a version of the Flex UI that is older than 1.19?

If you downgrade Flex to a version older than 1.19, Flex will automatically switch back to the default React version. This may disrupt your users if you have deployed a plugin that leverages features or APIs of the newer React version.

To avoid this situation, we recommend redeploying any plugins prior to downgrading the Flex UI version. That way you can remove any dependencies on the newer APIs.

If you have a plugin deployed that is using the newer React version, you can remove it using another command. This must be executed within the local directory of your plugin:

plugin-sample $ TWILIO_ACCOUNT_SID=ACxxx TWILIO_AUTH_TOKEN=abc npm remove

What happens if I change the version of React back to the default version?

Your users may be disrupted if you have a plugin deployed that uses the newer features or APIs within React. To avoid this situation, we recommend redeploying any plugins prior to downgrading the React version. That way you can remove any dependencies on the newer APIs.

Can I use new versions of dependencies like react-redux and react-router?

Flex does not yet support setting versions of react-redux and react-router. When you choose the React version on the Developer Setup page, we set the versions for react-dom and react.

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 browsing the Twilio tag on Stack Overflow.

        
        
        

        Thank you for your feedback!

        We are always striving to improve our documentation quality, and your feedback is valuable to us. How could this documentation serve you better?

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

        Thanks for your feedback!

        Refer us and get $10 in 3 simple steps!

        Step 1

        Get link

        Get a free personal referral link here

        Step 2

        Give $10

        Your user signs up and upgrade using link

        Step 3

        Get $10

        1,250 free SMSes
        OR 1,000 free voice mins
        OR 12,000 chats
        OR more