Paste >=19.7.0 compatibility with Twilio CLI

[dmitriy-kudelko]

Hey guys 👋

We're using Paste to develop custom plugins for Flex. We noticed that upgrading from 19.6.0 to 19.7.0 and onwards brakes the build throwing e.g.:

Module parse failed: Unexpected token (1:1537)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

We're using @twilio/flex-plugin-scripts@6.1.2 which is a latest stable version at the moment.

Is it a known issue? Do we need to customize the default Webpack configuration in some way to avoid that?

Thanks!

[SiTaggart]

Hi @dmitriy-kudelko

To double clarify, that's seen in 19.7.0, not just v20? v20 I might expect something like that as we changed the compilation target to browser, not node, but 19.7 is a little out of the blue.

Is there also a longer error message or log you can share. That currently one doesn't tell us too much to work with.

Thanks

[TheSisb]

Hey @dmitriy-kudelko,

I took a look at the differences in the file from radio-group/dist/index.es.js before version 19.7 and after. Nothing stands out other than removing the spread operator shims.

Before file

After file

You can compare them in an online diff tool.

As far as I can tell, there shouldn't be any significant changes in the file. It seems like some likely options are:

1. your webpack config is suddenly loading our *.es.js dist file instead of the commonjs *.js dist file
2. your webpack config suddenly stopped supporting *.es.js files

If possible, get to a working state in your code and only update the Paste version without making any other changes. Does the issue still occur?

[dmitriy-kudelko]

Hi, @TheSisb,

Well, it was only change that we did. Nothing else was updated. It was actually a renovate bot PR.

Our webpack config customization is minimal, so it's almost a default one from flex plugins scripts.

const path = require('path');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = (config) => {
  /**
   * Customize the webpack by modifying the config object.
   * Consult https://webpack.js.org/configuration for more information
   */

  config.module.rules.unshift({
    test: /\.inline.svg$/,
    use: ['@svgr/webpack'],
  });

  if (process.env.ANALYZE_BUNDLE) {
    config.plugins.push(new BundleAnalyzerPlugin());
  }

  Object.assign(config.resolve.alias, {
    '@': path.resolve(__dirname, 'src'),
    '~': path.resolve(__dirname, '.'),
  });

  return config;
};

[dmitriy-kudelko]

@SiTaggart, yes, absolutely. We can for now just skip the updates. It's not a blocker for us. Just wanted to let you guys know, 'cause my impression was that the compatibility with Flex plugins CLI is implied as Paste is a recommended UI library for building Flex plugins.

So this would likely more affect the ones who start building a new plugin, follow instructions for installing Twilio Flex plugins CLI, install Paste and realize that the setup doesn't work.

[SiTaggart]

Hi @dmitriy-kudelko

So, in v19.7.0 we bumped our browser targets from target: ['chrome66', 'firefox58', 'safari11', 'edge79', 'node12.19.0'], to target: ['chrome100', 'firefox100', 'safari14', 'edge100', 'node18.16.0'],

This helps make our bundles a little smaller as modern browsers and node now support many more JavaScript features that would no longer require being transpiled when we compile our typescript.

What this has resulted in is the removal of the object spread and object rest spread shims from our compiled JS. That, by the looks of it, is what is causing the Flex plugin builder to have problems. You might need to update that webpack config to transpile our code before it gets run, or have Flex update the plugin builder to support more modern JavaScript, so you don't have to.

This seems logical to us as Flex is only supported in Chrome which has great spread support, and Node 16 is about to go end of Life in September.

If you need any further support, we'd probably direct you to the Flex product team from there on, as they'd be in a much better position in supporting Flex for you.

[SiTaggart]

So this would likely more affect the ones who start building a new plugin, follow instructions for installing Twilio Flex plugins CLI, install Paste and realize that the setup doesn't work.

Agreed. You also need to do quite a bit of extra work from the quick start guide to even get towards using a newer version of paste, as the Flex-UI package pins a couple of Paste deps to Paste Core v15. You have to wrestle some resolutions to get it picking up the right ones.

Hopefully they will improve that experience in the coming months

[dmitriy-kudelko]

@SiTaggart, alright, thank you!

It would be enough for now to just let the Flex team know about this issue.

[moretalk]

Hi @SiTaggart @dmitriy-kudelko wanted to add to this. So our customers could install any combination of upto 100 plugins in there Flex Environment. I am noticing that our Flex 1.X plugins are at most 1mb (because we do not need to bundle Material UI) whereas our Flex 2.X plugins are close to double this because we need to bundle newer versions of Paste in each plugin.

It would be far better if the Flex Team allowed for a choice of Paste Version (in the same way as they do React). This way we could support newer versions of Paste.

The Docs are in desperate need of updating. I did find that I could not get any higher than 17.7.0. Version 18.X said that it could not be used as JSX? and version 19 refused to bundle in webpack.

[serifluous]

Hey @moretalk ! For this issue and the ones you mentioned in #2752 , can you create a support ticket with the Flex team, or speak with your account manager if you have one? They'll be the best people who can help you out with this.