twilio-labs / plugin-flex Goto Github PK

When i am trying to deploy using twilio flex:plugins:deploy, I am getting this error:

Error: Request get to https://api.twilio.com/2010-04-01/Accounts/ACXXXXXXXXXXXXXXX.json failed with status 401 and message Authenticate
    at Http.onError (/Users/XXXX/.twilio-cli/node_modules/flex-plugin-scripts/dist/clients/http.js:46:23)
    at processTicksAndRejections (internal/process/task_queues.js:86:5)

I have created a twilio-cli profile with my ACCOUNT_SID and AUTH_TOKEN and using the profile with the same ACCOUNT_SID as mentioned in the above URL.

Steps to reproduce:

Install Twilio CLI globally:
$ npm install twilio-cli@latest -g

Install the CLI Flex plugin:
$ twilio plugins:install @twilio-labs/plugin-flex@beta

Create a new Typescript plugin:
$ twilio flex:plugins:create plugin-sample1 --install --typescript

Result:

• Creating project directory
  √ Creating project directory
• Installing dependencies
  × Command failed with ENOENT: npm install
  spawn npm ENOENT
  npm WARN deprecated [email protected]: This project is no longer maintained.
  npm WARN deprecated [email protected]: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
  npm WARN deprecated [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
  npm WARN deprecated [email protected]: request has been deprecated, see request/request#3142
  npm WARN deprecated [email protected]: request-promise-native has been deprecated because it extends the now deprecated request package, see request/request#3142
  npm WARN deprecated [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
  npm WARN deprecated [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
  npm WARN deprecated [email protected]: Use cheerio-select instead
  npm WARN deprecated [email protected]: this library is no longer supported
  C:\Users\andru\Documents\temp\ff\plugin-sample1\node_modules\flex-plugins-utils-logger\dist\lib\logger.js:1
  Error: Cannot find module '@k88/pipe-compose'. Please verify that the package.json has a valid "main" entry
  at Object. (C:\Users\andru\Documents\temp\ff\plugin-sample1\node_modules\flex-plugins-utils-logger\dist\lib\logger.js:30:22) {
  code: 'MODULE_NOT_FOUND',
  path: 'C:\Users\andru\Documents\temp\ff\plugin-sample1\node_modules\@k88\pipe-compose\package.json',
  requestPath: '@k88/pipe-compose'
  }
  npm ERR! code ELIFECYCLE
  npm ERR! errno 1
  npm ERR! [email protected] postinstall: flex-plugin pre-script-check
  npm ERR! Exit status 1

I am trying to migrate my existing plugins to the new plugin API.
I have successfully managed to migrate two of my existing plugins. I am facing an issue with my third plugin that is comparatively larger in size when built (536 Kb)
When I try to use the command
UNBUNDLED_REACT=true twilio flex:plugins:deploy --changelog "Migration from v3 to v4" --description "My Desctiption"

My plugin compiles with warnings but never finishes the upload.

So as a quick investigation, I tried running the build command
UNBUNDLED_REACT=true twilio flex:plugins:build

Which showed me the webpack warnings

Compiling a production build...

Plugin plugin-myplugin was successfully compiled with some warnings.

Warning 1
asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  plugin-myplugin.js (536 KiB)
Warning 2
entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (536 KiB)
      plugin-myplugin.js

Warning 3
webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

3 'files were compiled:'
         535.5 KB        build/plugin-myplugin.js
         2.2 KB          build/plugin-myplugin.js.LICENSE.txt
         0.1 KB          build/plugin-myplugin.js.map

Is there a way I can resolve this?

I'm having this message on twilio-cli/2.11.0 win32-x64 node-v10.15.1

Invoking any command that uses network I get this:

[DEBUG] self signed certificate in certificate chain
[DEBUG] Error: self signed certificate in certificate chain
at TLSSocket.onConnectSecure (_tls_wrap.js:1051:34)
at TLSSocket.emit (events.js:189:13)
at TLSSocket._finishInit (_tls_wrap.js:633:8)

I don't know why certificate is not being verified by authority

Would it be possible to add a --env .env.prod to the deploy command?
https://github.com/twilio-labs/plugin-flex#twilio-flexpluginsdeploy

Similar to how serverless plugin allows this

End Result: I'm trying to create a CRM integration into Twilio Flex. The CRM is a built-from-scratch platform. There are several ways I could go about solving the issue: 1. Pass gathered variables captured in my Studio IVR to the Customer Context section of Flex so the agent gets the necessary information to look up the customer in the CRM without having to request the account information a second time 2. Create a screen pop when the agent answers a flex call/text/chat that would bring up the correct customer screen based on a URL with the account number variables at the end that were entered in the IVR/text/chat.

I would prefer to create the 2nd option of a screen pop to be integrated into the CRM section of Flex so that the agent doesn't need to enter in details that were already captured in the IVR/text/chat, but I have limited developing experience and that option is appearing to be a more complex solution.

Current Issue: My current issue however, is related to building a plugin for Flex. I currently am going through the Twilio instructions and am having an issue with getting a sample environment Started. I downloaded node v15.7.0 and npm v7.4.3 and am currently walking through the steps provided here: https://www.twilio.com/docs/flex/quickstart/getting-started-plugin I just tried to run twilio flex:plugins:create plugin-sample --install and got the following error. I'm hoping someone can provide some insight on how to fix it.

C:\Users\joshr>twilio flex:plugins:create plugin-sample --install
√ Creating project directory
× Command failed with exit code 1: npm install
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: @material-ui/[email protected]
npm WARN node_modules/@material-ui/core
npm WARN @material-ui/core@"3.9.3" from @twilio/[email protected]
npm WARN node_modules/@twilio/flex-ui
npm WARN dev @twilio/flex-ui@"^1" from the root project
npm WARN 2 more (@material-ui/lab, @twilio/flex-ui-core)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer @material-ui/core@"^1.0.0" from @material-ui/[email protected]
npm WARN node_modules/@material-ui/icons
npm WARN @material-ui/icons@"2.0.3" from @twilio/[email protected]
npm WARN node_modules/@twilio/flex-ui-core
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"16.5.2" from the root project
npm ERR! react@"^16.5.2" from @twilio/[email protected]
npm ERR! node_modules/@twilio/flex-ui
npm ERR! dev @twilio/flex-ui@"^1" from the root project
npm ERR! 4 more (react-dom, @material-ui/core, @material-ui/lab, @twilio/flex-ui-core)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.14.0" from [email protected]
npm ERR! node_modules/enzyme-adapter-react-16/node_modules/react-test-renderer
npm ERR! react-test-renderer@"^16.0.0-0" from [email protected]
npm ERR! node_modules/enzyme-adapter-react-16
npm ERR! enzyme-adapter-react-16@"^1" from [email protected]
npm ERR! node_modules/flex-plugin-test
npm ERR! flex-plugin-test@"^4.3.18-beta.0" from [email protected]
npm ERR! node_modules/flex-plugin-scripts
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\joshr\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\joshr\AppData\Local\npm-cache_logs\2021-01-27T20_01_09_372Z-debug.log
Error: Command failed with exit code 1: npm install
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: @material-ui/[email protected]
npm WARN node_modules/@material-ui/core
npm WARN @material-ui/core@"3.9.3" from @twilio/[email protected]
npm WARN node_modules/@twilio/flex-ui
npm WARN dev @twilio/flex-ui@"^1" from the root project
npm WARN 2 more (@material-ui/lab, @twilio/flex-ui-core)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer @material-ui/core@"^1.0.0" from @material-ui/[email protected]
npm WARN node_modules/@material-ui/icons
npm WARN @material-ui/icons@"2.0.3" from @twilio/[email protected]
npm WARN node_modules/@twilio/flex-ui-core
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"16.5.2" from the root project
npm ERR! react@"^16.5.2" from @twilio/[email protected]
npm ERR! node_modules/@twilio/flex-ui
npm ERR! dev @twilio/flex-ui@"^1" from the root project
npm ERR! 4 more (react-dom, @material-ui/core, @material-ui/lab, @twilio/flex-ui-core)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.14.0" from [email protected]
npm ERR! node_modules/enzyme-adapter-react-16/node_modules/react-test-renderer
npm ERR! react-test-renderer@"^16.0.0-0" from [email protected]
npm ERR! node_modules/enzyme-adapter-react-16
npm ERR! enzyme-adapter-react-16@"^1" from [email protected]
npm ERR! node_modules/flex-plugin-test
npm ERR! flex-plugin-test@"^4.3.18-beta.0" from [email protected]
npm ERR! node_modules/flex-plugin-scripts
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with force, or legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:UsersjoshrAppDataLocalnpm-cacheeresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! C:UsersjoshrAppDataLocalnpm-cache_logs2021-01-27T20_01_09_372Z-debug.log
at C:Usersjoshr.twilio-clinode_modulescreate-flex-plugindistlibcommands.js:86:27
at step (C:Usersjoshr.twilio-clinode_modulescreate-flex-plugindistlibcommands.js:52:23)
at Object.next (C:Usersjoshr.twilio-clinode_modulescreate-flex-plugindistlibcommands.js:33:53)
at fulfilled (C:Usersjoshr.twilio-clinode_modulescreate-flex-plugindistlibcommands.js:24:58)
at processTicksAndRejections (node:internal/process/task_queues:94:5)