twilio / flex-ui-sample Goto Github PK
View Code? Open in Web Editor NEWTwilio Flex UI Sample
Twilio Flex UI Sample
The project is launched after executing the npm start
command.
The projet failed to compile with the error message
./node_modules/value-or-promise/build/module/ValueOrPromise.js 8:7
Module parse failed: Unexpected token (8:7)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| };
| export class ValueOrPromise {
> state;
| constructor(executor) {
| let value;
node v16.13.1
and npm v8.1.2
flex-ui-sample
from the main
branch.npm install
at the root of the project.npm start
at the root of the project.node: v16.13.1
npm: v8.1.2
package.json:
{
"name": "@twilio/flex-ui-sample",
"version": "1.0.0",
"private": true,
"dependencies": {
"@twilio/flex-ui": "^2.0.0-beta.1",
"history": "4.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "3.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
error Couldn't find package "@twilio/frame-ui@^0.23.1" required by "@twilio/flex-ui@^1" on the "npm" registry.
I'm asking here because I have no idea where to ask...
I'm working on an "old" projects which was using frame-ui
package and I'm getting this error:
npm ERR! 404 Not Found: @twilio/frame-ui@^0.16.0
I think (as far as I know) that I should move to this new package: https://www.npmjs.com/package/@twilio/flex-ui
but it has frame-ui
as a dependency as well as @twilio/twilio-flex-insights
, which also gives me an error.
What should I use?
Hello,
I've brought in a custom component developed separately into this UI. How do we load it up?
In the plugin source code, it was doing:
import * as FlexPlugin from 'flex-plugin';
import RlPlugin from './RlPlugin';
FlexPlugin.loadPlugin(RlPlugin);
However, when trying to do this inside of the index.js file, if I place it at the top of the code, nothing happens. It's supposed to be modifying the CRM container.
When running locally the flex ui, there is an error:
Failed to load resource: the server responded with a status of 403 ()
:1 Failed to load https://flex.twilio.com/plugins?roles=agent&serviceBaseUrl=http:%2F%2Flocalhost:8080%2F&version=1.0.1: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.
index.js:1452 failed to reach plugin service at https://flex.twilio.com/plugins Error: Network Error
at createError (createError.js:17)
at XMLHttpRequest.handleError (xhr.js:87)
I'm trying to use twilio flex in my application, but every time i tries to logout and login to my application whole redux store crashes with error:
TypeError: Cannot read property 'getState' of null
With new release we can add custom store for flex, and since i'm using typescript in my application it is failing with the error:
Type 'Reducer<AppState>' is not assignable to type 'Reducer<AppState, AnyAction>'.
Types of parameters 'state' and 'state' are incompatible.
Type 'AppState | undefined' is not assignable to type 'AppState'.
Type 'undefined' is not assignable to type 'AppState'.ts(2322)
rootReducer.tsx(45, 3): The expected type comes from property 'flex' which is declared here on type 'ReducersMapObject<{ flex: AppState; }, AnyAction>'
Is it possible to put or add two CRM container in Twilio Flex
I am trying to change the login view page logo (https://imgur.com/a/TQ3Y1bj) of flex.twilio.com on a self hosted instance.
As guided by twilio how to change login view logo (https://www.twilio.com/docs/flex/developer/ui/configuration#flex-agent-and-supervisor-ui) , I followed this :
flex.LoginView.defaultProps.logoUrl = "https://sample-logo-url.svg";
But,it doesn't seems to work.
does anyone have faced similar bug or solved it?
twilio/twilio-flex-insights is listed in dependencies for @twilio/flex-ui
however there is no way to install this package, what breaks overall ability to run the sample.
[npm-debug.log](https://github.com/twilio/flex-ui-sample/files/2808532/npm-debug.log)
$ npm install @twilio/twilio-flex-insights
npm ERR! Linux 4.15.0-43-generic
npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "install" "@twilio/twilio-flex-insights"
npm ERR! node v8.10.0
npm ERR! npm v3.5.2
npm ERR! code E404
npm ERR! 404 Not found : @twilio/twilio-flex-insights
npm ERR! 404
npm ERR! 404 '@twilio/twilio-flex-insights' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
npm ERR! Please include the following file with any support request:
npm ERR! /home/dima/Projects/learn_twilio/npm-debug.log
//edit
in case anyone would encounter this kind of bug, it's due to old npm version.
I am getting "Error: elements without key in MainHeader" with react-hot-loader
react-intl
Could not resolve dependency:
npm ERR! peerOptional typescript@"^4.2" from [email protected]
Do npm i react-intl with fresh new twilio flex plugin --typescript
as mentioned in the react-router-redux repo:
This project is no longer maintained. For your Redux <-> Router syncing needs with React Router 4+, please see one of these libraries instead:
- connected-react-router: https://github.com/supasate/connected-react-router
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.