SoftPhone component invalid hook call error

[RickGusG]

see in image below

[prinze77]

Your root project has different react version

Try yarn add react@16.14.0 or npm i react@16.14.0

Meanwile i will fix

[mrvenom1994]

Your root project has different react version

Try yarn add react@16.14.0 or npm i react@16.14.0

Meanwile i will fix

I am also facing the same issue. I tried with npm i react@16.14.0 still it's not working.

[IBlasterus]

I faced this problem too.

1. npx create-react-app my-app --template typescript
2. Edited App.tsx according to Usage and Issue https://github.com/prinze77/react-softphone/issues/10
3. npm start
4. Got an error: Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

This is my config-object:

const config = {
    domain: '<some IP>', // sip-server@your-domain.io
    uri: 'sip:9000@<some IP>', // sip:sip-user@your-domain.io
    password: '<some password>', //  PASSWORD ,
    ws_servers: 'wss://9000@<some IP>:8089', //ws server
    sockets: new WebSocketInterface('wss://<some IP>:8089'),
    display_name: '9000',//jssip Display Name
    debug: false // Turn debug messages on
};

9000 - my internal Asterisk number. <some IP> - Asterisk server IP <some password> - password for 9000 number on Asterisk

And npm i react@16.14.0 helped me. @prinze77, thank you.

Unfortunetly, I can't connect to my Asterisk. I am trying to solve this problem.

[prinze77]

Check the browser console log or the web socket messages in by pressing f12 in browser at network tab

Did you enabled the wss for 9000 extension in asterisk

[IBlasterus]

Did you enabled the wss for 9000 extension in asterisk

Yes

Console: WebSocket connection to 'wss://<some IP>:8089/' failed: Asterisk: tcptls.c:845 handle_tcptls_connection: FILE * open failed from peer '<my IP>:<some port>'!

I am trying to solve this problem.

[IBlasterus]

Solve this problem. Asterisk couldn't access to private key and didn't listen wss.

Now I online, but can't call. Application error on screen.

[prinze77]

Thank you for your feedback I know that there are dependencies issues and im fixing them right now

Concerning the error that you have at photo above

Try to add to the top of main page index.js or app.js import "babel-polyfill";

And at package.json

"dependencies": { "babel-polyfill": "^6.26.0", "jssip": "^3.8.2", "react": "^16.13.1", "react-dom": "^16.13.1", "react-scripts": "1.0.14", "react-softphone": "^1.6.0" },

[IBlasterus]

Try to add to the top of main page index.js or app.js import "babel-polyfill";

What should I import from this library?

[prinze77]

Just like that

import "babel-polyfill";

More info here https://babeljs.io/docs/en/babel-polyfill/

[IBlasterus]

import "babel-polyfill";

Did it.

When I tried imput number *43 for echo-test I got empty screen and errors in console (on photos). I even didn't have time to press the button.

[prinze77]

Check this boilerplate please

https://github.com/prinze77/my-app

Will it work on your machine? What node version you use?

[IBlasterus]

It's works. You used base template create-react-app, without TypeScript?

Service-code *43 for echo-test doesn't work.

When it's rolled up, I can't see or hear the incoming call.

[prinze77]

You used base template create-react-app, without TypeScript?

Yes

When it's rolled up, I can't see or hear the incoming call.

Fixed, need to checkout

Service-code *43 for echo-test doesn't work.

Thats an input validation issue. The input can only validate numbers. I will make a fix by adding to validation * and #. https://github.com/prinze77/react-softphone/blob/bc90f008ebb113cb62d0337068647171e785d4ad/src/index.js#L518-L523 Thank you for finding this bug