Customer has following question - which versions of twilio-paste/core and twilio-paste/icons go together?

[dmolloy71]

Customer reports he is getting:

Unfortunately, I am getting build errors that seems to be due to conflicting versions between twilio-paste/core and twilio-paste/icons:

npm WARN Conflicting peer dependency: @twilio-paste/[[email protected]](mailto:[email protected])

npm WARN node_modules/@twilio-paste/icons

npm WARN peer @twilio-paste/icons@"^10.0.0" from @twilio-paste/[[email protected]](mailto:[email protected])

npm WARN node_modules/@twilio-paste/combobox

npm WARN @twilio-paste/combobox@"^14.0.0" from @twilio-paste/[[email protected]](mailto:[email protected])

npm WARN node_modules/@twilio-paste/core

npm ERR! code ERESOLVE

npm ERR! ERESOLVE could not resolve

npm ERR!

npm ERR! While resolving: @twilio-paste/[[email protected]](mailto:[email protected])

npm ERR! Found: @twilio-paste/[[email protected]](mailto:[email protected])

npm ERR! node_modules/@twilio-paste/icons

npm ERR! @twilio-paste/icons@"11.0.0" from the root project

npm ERR!

npm ERR! Could not resolve dependency:

npm ERR! peer @twilio-paste/icons@"^10.0.0" from @twilio-paste/[[email protected]](mailto:[email protected])

npm ERR! node_modules/@twilio-paste/core

npm ERR! @twilio-paste/core@"18.1.0" from the root project

npm ERR!

npm ERR! Conflicting peer dependency: @twilio-paste/[[email protected]](mailto:[email protected])

npm ERR! node_modules/@twilio-paste/icons

npm ERR! peer @twilio-paste/icons@"^10.0.0" from @twilio-paste/[[email protected]](mailto:[email protected])

npm ERR! node_modules/@twilio-paste/core

npm ERR! @twilio-paste/core@"18.1.0" from the root project

If I choose a twilio-paste/core version later than 18.1.0, I get other type of errors, actually the plugin doesn't compile properly:

Module parse failed: Unexpected token (2:3876)
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

I recommened customer try the following:
'use the latest for paste/icons "@twilio-paste/icons": "12.1.0" 
 If you are still having issue can you try latest for core: "@twilio-paste/core": "20.2.0" 
 If you are still having issue can you include a carrot as follows:
 "@twilio-paste/core": "^20.0.0",
"@twilio-paste/icons": "^12.0.0",'

Customer reported back: 
when I use the latest versions, I get this error:

TypeError: Cannot destructure property 'dir' of 'T.package' as it is undefined.
at Object. (C:\Users\salsabea\Projects\twilio\src\flex_ui_plugins\plugin-dialer-numberui\node_modules\esm\esm.js:1:1440)
at Module._compile (node:internal/modules/cjs/loader:1198:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1252:10)
at Module.load (node:internal/modules/cjs/loader:1076:32)
at Function.Module._load (node:internal/modules/cjs/loader:911:12)
at Module.require (node:internal/modules/cjs/loader:1100:19)
at require (node:internal/modules/cjs/helpers:119:18)
at Object. (C:\Users\salsabea\Projects\twilio\src\flex_ui_plugins\plugin-dialer-numberui\node_modules@twilio\flex-plugin-scripts\bin\flex-plugin:5:11)
at Module._compile (node:internal/modules/cjs/loader:1198:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1252:10)

I responded to the Customer:
"can you npm update after creating their plugin to get the paste core and icon dependencies back in line."

Customer responded:
"unfortunately, npm update didn't help. And in all cases, I was deleting package.lock and the node modules folder + clear cache before I installed the packages again.
Somehow locally (but not in jenkins) I can't see errors while installing the dependencies, but when I run the plugin an error shows, sometimes just for a brief time and sometimes it stays. But in both cases the plugin shows errors in the browser console and flex is completely frozen. Here what I have now in my package.json:

{
"name": "plugin-dialer-numberui",
"version": "0.0.88",
"private": true,
"scripts": {
"postinstall": "flex-plugin pre-script-check",
"test": "python -m pytest cicd/testing/test_load.py --html artifacts/report.html --self-contained-html"
},
"dependencies": {
"@twilio-paste/core": "20.3.0",
"@twilio-paste/icons": "12.1.0",
"@twilio/flex-plugin-scripts": "5.1.2",
"p-retry": "5.0.0",
"prop-types": "^15.8.0",
"react": "17.0.2",
"react-dom": "17.0.2"
},
"devDependencies": {
"@twilio/flex-ui": "2.1.1",
"react-test-renderer": "^17.0.2"
}
}

The main error that is shown in the console:

./node_modules/@twilio-paste/combobox/dist/index.es.js 1:8844
Module parse failed: Unexpected token (1:8844)
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

Attached console log

[console.log](https://github.com/twilio-labs/paste/files/12672302/console.log)

[TheSisb]

Hi @dmolloy71

There's a few things going on here and it's hard to guess correctly, so I will share some thoughts in the hope it helps.

It's a plugin using its own version of Paste, in a Flex app which uses its own version of Paste. There's a possibility of issues in that aspect alone, so I would recommend exploring module resolutions in the package.json. Adding something like this forces the dependencies to a specific version and may solve the issue:

  "resolutions": {
    "@twilio-paste/core": "20.3.0",
    "@twilio-paste/icons": "12.1.0",
  },

Alternatively you can use the same versions of Paste that Flex app is using. I don't know these versions myself, but you can check with the folks on Flex.

---

Another thought is that we updated our browser targets for our compiled bundles in @twilio-paste/core version 19.7.0 to more modern browsers (still supporting >93% of the world's browser usage) to enable additional functionality in Paste. It is possible the module bundler being used (probably webpack in your case) needs some updates as well so it can compile things correctly. In this instance I recommend filing a Flex support ticket for assistance since it is outside our domain of expertise.

---

Lastly, the core and icons package should work relatively loosely, so there should be minimal thrash with version lags. In any case, I would recommend updating core and icons to the latest versions. If those still don't work, it is clear at that point that the paste versions aren't the issue but something else happening at build time.

[dmolloy71]

Hi I was informed by customer "After more trial and error, I was able to solve the issue using these versions:

"@twilio-paste/core": "^18.0.0",
"@twilio-paste/icons": "12.1.0",

And I separately installed a specific version of @twilio-paste/tabs to insure the same look overall. Other than that, flex was not compatible with the latest version of @twilio-paste/core, I had to fix the cicd to use the extra flag legacy-peer-deps.

Regarding your question about RecordIcon, I actually checked the code of the various versions of @twilio-paste/icons in npm registry to see how back can I go without losing this icon, but now it works with the newest version, then there is no problem."

[TheSisb]

Thanks for following up. I shared this with the Flex team as well.