Using globally defined script inside the react component

Question

I'm creating a web based chat app using react and decided to implement end to end encryption. So I'm using signal encryption protocol. Now the main library I need to import in order to do end to end encryption is in a file called libsignal-protocol.js (it is available in signals github repo). All functions and variables I need to use is inside a variable called libsignal (example - libsignal.KeyHelper.generateIdentityKeyPair().

Library libsignal-protocol.js doesn't provide javascript modules so I'm importing whole library with a global script declaration.

<!DOCTYPE html>
<html lang="en">
  <head>
   <script src="libsignal-protocol.js"></script>
    ...........
   </head>
<body>
......
</body>
</html>

Since my chat app is a react app, I tried to call libsignal's functions inside react components.

Webpack gives an error

Line 33:13: 'libsignal' is not defined no-undef

I googled and tried to solve this issue and found a very similar question but that question is related with typescript and I'm using javascript so this is not a duplicate.

Javascript doesn't have a declare keyword. How do I tell webpack that I have already imported libsignal using a global script tag?

is your bundle being loaded before or after the libsignal library? if libsignal is putting something on global variable and your webpack bundle is being loaded afterwards you should be able to access it via window.whateverLibSignalAddsToGlobal . alternatively you can load the script asynchronously, and render your react tree / component afterwards github.com/eldargab/load-script — azium
– azium, Commented Oct 9, 2020 at 19:26
Thankyou! it really helped. bundle is loaded after the libsignal library. Thanks a lot. @azium — cipherdragon
– cipherdragon, Commented Oct 9, 2020 at 19:34

Igor Doroshenko · Accepted Answer · 2020-10-09 19:37:35Z

1

Please try this

window.libsignal

answered Oct 9, 2020 at 19:37

Igor Doroshenko

1911 gold badge1 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

cipherdragon Over a year ago

same as azium's answer in the comments.

Igor Doroshenko Over a year ago

sorry didn't notice

azium Over a year ago

@IgorDoroshenko you da real mvp

Collectives™ on Stack Overflow

Using globally defined script inside the react component

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related