# Openvidu-browser NPM package doesn't work without Babel

**URL:** <https://openvidu.discourse.group/t/openvidu-browser-npm-package-doesnt-work-without-babel/3296>\
**Category:** Issues developing apps\
**Tags:** v2\
**Created:** [August 13, 2021, 7:28am UTC](https://openvidu.discourse.group/t/openvidu-browser-npm-package-doesnt-work-without-babel/3296 "2021-08-13T07:28:56Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bullwinkle](https://avatars.discourse-cdn.com/v4/letter/b/8491ac/32.png) [@Bullwinkle](https://openvidu.discourse.group/u/Bullwinkle)\
**Post date:** [August 13, 2021, 7:28am UTC](https://openvidu.discourse.group/t/openvidu-browser-npm-package-doesnt-work-without-babel/3296/1 "2021-08-13T07:28:56Z")

</div>

I am using Vite [https://vitejs.dev/](https://vitejs.dev/) as front-end developing and production building tool. It is modern very fast dev frontend server, but it doesn’t use Babel and support only modern browsers.

The problem is that Openvidu-Browser NPM package doesn’t work as expected in this environment, something is going wrong with import, please check this thread for more info [Cannot read property 'call' of undefined in openvidu-browser client - #9 by Bullwinkle](https://openvidu.discourse.group/t/cannot-read-property-call-of-undefined-in-openvidu-browser-client/3285/9)

It seems that Openvidu-Browser in this environment doesn’t have some parts that are already included while using Webpack-based developing and production solution with Babel.

I also discovered fun thing. As i use Vite with Vue, i don’t have to use vue-cli. But if i add @vue/cli-service to dev-dependencies, in dev mode imported openvidu script works fine. But still doesn’t work in production build.

How could i help to discover this issue more deep and find possible solution? Thanks!

---

<div class="post-metadata">

**Author:** ![micael.gallego](https://yyz2.discourse-cdn.com/free1/user_avatar/openvidu.discourse.group/micael.gallego/32/2_2.png) [@micael.gallego](https://openvidu.discourse.group/u/micael.gallego)\
**Post date:** [August 18, 2021, 10:47pm UTC](https://openvidu.discourse.group/t/openvidu-browser-npm-package-doesnt-work-without-babel/3296/2 "2021-08-18T22:47:05Z")

</div>

Hello @Bullwinkle,

It seems there is a sort of incompatibility between openvidu-browser and Vite.

As we are not Vite users we don’t have any clue to what is going on. So, if you want openvidu-browser NPM package working with Vite, you should download openvidu-browser code ([openvidu/openvidu-browser at master · OpenVidu/openvidu · GitHub](https://github.com/OpenVidu/openvidu/tree/master/openvidu-browser)), learn how to generate the NPM package ([openvidu/package.json at master · OpenVidu/openvidu · GitHub](https://github.com/OpenVidu/openvidu/blob/master/openvidu-browser/package.json#L41)), fix the build so it is compatible with Vite and contribute the patch.

If you want to see the CI script performing the NPM publishing, you can take a look:

> <https://github.com/OpenVidu/adm-scripts/blob/master/scripts/openvidu_ci_container_do_release.sh#L17-L41>

Regards

---

<div class="post-metadata">

**Author:** ![Bullwinkle](https://avatars.discourse-cdn.com/v4/letter/b/8491ac/32.png) [@Bullwinkle](https://openvidu.discourse.group/u/Bullwinkle)\
**Post date:** [August 19, 2021, 10:33am UTC](https://openvidu.discourse.group/t/openvidu-browser-npm-package-doesnt-work-without-babel/3296/3 "2021-08-19T10:33:50Z")

</div>

Thank you, @micael.gallego!

Seems it is outside of my scope for now.

For everyone having same issue, this is how i import openvidu-browser in my Vue app:

```auto
created(){
    const script = document.createElement("script");

    script.src =
      "/assets/js/openvidu-browser-2.18.0.min.js";

    document.body.appendChild(script);

    script.addEventListener("load", () => {
      // OpenVidu browser loaded
      // Getting token from backend...

      let body = { secret: this.secret, room: this.roomId };

      postFetch("api2/video", body).then((respond) => {
        // When token recieved from backend start your connection

        this.token = respond;
        this.joinSession(); // Start you openvdidu logic here   
      });
    });
}

```

---

<div class="post-metadata">

**Author:** ![micael.gallego](https://yyz2.discourse-cdn.com/free1/user_avatar/openvidu.discourse.group/micael.gallego/32/2_2.png) [@micael.gallego](https://openvidu.discourse.group/u/micael.gallego)\
**Post date:** [August 19, 2021, 11:05am UTC](https://openvidu.discourse.group/t/openvidu-browser-npm-package-doesnt-work-without-babel/3296/4 "2021-08-19T11:05:34Z")

</div>

Using that strategy openvidu-browser is working as expected?

---

<div class="post-metadata">

**Author:** ![Bullwinkle](https://avatars.discourse-cdn.com/v4/letter/b/8491ac/32.png) [@Bullwinkle](https://openvidu.discourse.group/u/Bullwinkle)\
**Post date:** [August 19, 2021, 11:22am UTC](https://openvidu.discourse.group/t/openvidu-browser-npm-package-doesnt-work-without-babel/3296/5 "2021-08-19T11:22:17Z")

</div>

Didn’t test in production so far, but in development environment everything works as expected

чт, 19 авг. 2021 г., 16:15 Micael Gallego via OpenVidu \<[openvidu@discoursemail.com](mailto:openvidu@discoursemail.com)\>:

---

<div class="post-metadata">

**Author:** ![mihailj](https://yyz2.discourse-cdn.com/free1/user_avatar/openvidu.discourse.group/mihailj/32/406_2.png) [@mihailj](https://openvidu.discourse.group/u/mihailj)\
**Post date:** [August 19, 2021, 11:41am UTC](https://openvidu.discourse.group/t/openvidu-browser-npm-package-doesnt-work-without-babel/3296/6 "2021-08-19T11:41:12Z")

</div>

Hello,

I also had some issues with the browser plugin in a build pipeline that validates for ES5 JavaScript.

You can see the results when running a ES5 validator:

```auto
$ npx es5-validator ./openvidu-browser-2.19.0.js 

[es5-validator] Your code is not ES5 Compatible. It's not ready to ship to production, otherwise it will break you App on iOS 9 or iOS 10.

Error: ECMAScript 5 validate failed when parsing ./openvidu-browser-2.19.0.js (formatted) (3500, 8)

  3490 | * Based on
  3491 | * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message
  3492 | * Digest Algorithm, as defined in RFC 1321.
  3493 | * Version 2.2 Copyright (C) Paul Johnston 1999 - 2009
  3494 | * Other contributors: Greg Holt, Andrew Kepert, Ydnar, Lostinet
  3495 | * Distributed under the BSD License
  3496 | * See http://pajhome.org.uk/crypt/md5 for more info.
  3497 | */
  3498 | function md5(bytes) {
  3499 | if (typeof bytes === 'string') {
> 3500 | const msg = unescape(encodeURIComponent(bytes)); // UTF8 escape
       | ^ Invalid ECMAScript 5 syntax
  3501 |
  3502 | bytes = new Uint8Array(msg.length);

```

Seems that the **uuid** package newer versions used in the browser plugin are to blame.

Cheers,  
Mihail

---

<div class="post-metadata">

**Author:** ![Bullwinkle](https://avatars.discourse-cdn.com/v4/letter/b/8491ac/32.png) [@Bullwinkle](https://openvidu.discourse.group/u/Bullwinkle)\
**Post date:** [August 20, 2021, 6:48am UTC](https://openvidu.discourse.group/t/openvidu-browser-npm-package-doesnt-work-without-babel/3296/7 "2021-08-20T06:48:30Z")

</div>

@mihailj thanks for sharing!

How do you think it could be fixed? Adding some package to app dependencies maybe?

---

<div class="post-metadata">

**Author:** ![mihailj](https://yyz2.discourse-cdn.com/free1/user_avatar/openvidu.discourse.group/mihailj/32/406_2.png) [@mihailj](https://openvidu.discourse.group/u/mihailj)\
**Post date:** [August 20, 2021, 8:15am UTC](https://openvidu.discourse.group/t/openvidu-browser-npm-package-doesnt-work-without-babel/3296/8 "2021-08-20T08:15:53Z")

</div>

I actually gave up and run Babel over the file. 😊 That’s why your thread subject seemed quite familiar. But I’m using a custom OpenVidu browser API build anyway so I’m not adding it to my project from `package.json`.

From what I’ve seen the **uuid** package does have ES5 files in `openvidu-browser/node_modules/uuid/dist/esm-browser/` so the OpenVidu browser API should use these in the build process.

---

<div class="post-metadata">

**Author:** ![Bullwinkle](https://avatars.discourse-cdn.com/v4/letter/b/8491ac/32.png) [@Bullwinkle](https://openvidu.discourse.group/u/Bullwinkle)\
**Post date:** [August 20, 2021, 8:44am UTC](https://openvidu.discourse.group/t/openvidu-browser-npm-package-doesnt-work-without-babel/3296/9 "2021-08-20T08:44:36Z")

</div>

@mihailj so you compiled your custom-made Openvidu-Browser with Babel, i got it right?  
Never did things like this before, could you please provide small hint how to do it? Would be very heplful for my case.

UPD: But is it worth it? Seems i will just get openvidu-browser-2.19.0.min.js file i could already get in releases page in this case, right?

> **[Releases · OpenVidu/openvidu](https://github.com/OpenVidu/openvidu/releases)**
>
> OpenVidu Platform main repository. Contribute to OpenVidu/openvidu development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![Bullwinkle](https://avatars.discourse-cdn.com/v4/letter/b/8491ac/32.png) [@Bullwinkle](https://openvidu.discourse.group/u/Bullwinkle)\
**Post date:** [August 20, 2021, 9:05am UTC](https://openvidu.discourse.group/t/openvidu-browser-npm-package-doesnt-work-without-babel/3296/10 "2021-08-20T09:05:56Z")

</div>

@micael.gallego i am actually trying to find a better way of importing Openvidu-Browser in my app, but need some help. Think it would be much better to add compiled OpenVidu js file to assets folder like this:

```auto
<script>
import * as OpenVidu from "../assets/openvidu-browser-2.18.0.min.js";
...
created(){
    this.OV = new OpenVidu();
}

```

But get this error.

 ![image](https://global.discourse-cdn.com/free1/uploads/openvidu/original/2X/9/9b9896e711a6620900013d41d36391c147850233.png)

In case of adding js file this way, how should i call OpenVidu consturctor?  
Thanks in advance!

---

<div class="post-metadata">

**Author:** ![micael.gallego](https://yyz2.discourse-cdn.com/free1/user_avatar/openvidu.discourse.group/micael.gallego/32/2_2.png) [@micael.gallego](https://openvidu.discourse.group/u/micael.gallego)\
**Post date:** [August 20, 2021, 9:21am UTC](https://openvidu.discourse.group/t/openvidu-browser-npm-package-doesnt-work-without-babel/3296/11 "2021-08-20T09:21:01Z")

</div>

Hello @Bullwinkle, I’m sorry but I don’t know.

OpenVidu js file is designed to be used as it is used in our tutorials.

```auto
<script src="openvidu-browser-2.19.0.js"></script>
<script src="app.js"></script>

```

And then, in app.js

```auto
OV = new OpenVidu();
session = OV.initSession();

```

I don’t know how to use it with an import.

Maybe you can dig into TypeScript compiler and found the way to build a openvidu-browser.js build compatible with ESM.

---

<div class="post-metadata">

**Author:** ![micael.gallego](https://yyz2.discourse-cdn.com/free1/user_avatar/openvidu.discourse.group/micael.gallego/32/2_2.png) [@micael.gallego](https://openvidu.discourse.group/u/micael.gallego)\
**Post date:** [August 20, 2021, 9:23am UTC](https://openvidu.discourse.group/t/openvidu-browser-npm-package-doesnt-work-without-babel/3296/12 "2021-08-20T09:23:10Z")

</div>

Remember this is the command used to generate openvidu-browser.js file from TypeScript code:

```auto
$ ../node_modules/browserify/bin/cmd.js --debug Main.ts -p [tsify] --exclude kurento-browser-extensions | ../node_modules/terser/bin/terser --source-map content=inline --output ../static/js/openvidu-browser-$VERSION.min.js

```

From here: [openvidu/package.json at 288e6492e1b359187a8a560f0b31a83a26fefeab · OpenVidu/openvidu · GitHub](https://github.com/OpenVidu/openvidu/blob/288e6492e1b359187a8a560f0b31a83a26fefeab/openvidu-browser/package.json#L40)

---

<div class="post-metadata">

**Author:** ![Bullwinkle](https://avatars.discourse-cdn.com/v4/letter/b/8491ac/32.png) [@Bullwinkle](https://openvidu.discourse.group/u/Bullwinkle)\
**Post date:** [August 20, 2021, 9:54am UTC](https://openvidu.discourse.group/t/openvidu-browser-npm-package-doesnt-work-without-babel/3296/13 "2021-08-20T09:54:24Z")

</div>

Thanks, will investigate it!

---

<div class="post-metadata">

**Author:** ![mihailj](https://yyz2.discourse-cdn.com/free1/user_avatar/openvidu.discourse.group/mihailj/32/406_2.png) [@mihailj](https://openvidu.discourse.group/u/mihailj)\
**Post date:** [August 20, 2021, 10:35am UTC](https://openvidu.discourse.group/t/openvidu-browser-npm-package-doesnt-work-without-babel/3296/14 "2021-08-20T10:35:46Z")

</div>

> so you compiled your custom-made Openvidu-Browser with Babel, i got it right?  
> Never did things like this before, could you please provide small hint how to do it? Would be very heplful for my case.

Yeah it is quite easy to [compile the OpenVidu browser API](https://docs.openvidu.io/en/2.19.0/developing/#compiling-openvidu-browser).

Then I followed [this tutorial to install and run Babel setup for ES5](https://stackoverflow.com/questions/34747693/how-do-i-get-babel-6-to-compile-to-es5-javascript#34747852).

So I just run this command over my JS file:

```auto
npx babel ./static/js/openvidu-browser-2.19.0-custom.js -o ./static/js/es5/openvidu-browser-2.19.0-custom.js

```

> UPD: But is it worth it? Seems i will just get openvidu-browser-2.19.0.min.js file i could already get in releases page in this case, right?

If it fixes your issue then sure, it’s the better way. But in my case the `min.js` file also doesn’t pass the ES5 validation… same problem with the **uuid** package compiled with the newer keywords.

---

<div class="post-metadata">

**Author:** ![Bullwinkle](https://avatars.discourse-cdn.com/v4/letter/b/8491ac/32.png) [@Bullwinkle](https://openvidu.discourse.group/u/Bullwinkle)\
**Post date:** [August 20, 2021, 10:57am UTC](https://openvidu.discourse.group/t/openvidu-browser-npm-package-doesnt-work-without-babel/3296/15 "2021-08-20T10:57:57Z")

</div>

@mihailj thank you a lot! Will try do the same!

---

<div class="post-metadata">

**Author:** ![Bullwinkle](https://avatars.discourse-cdn.com/v4/letter/b/8491ac/32.png) [@Bullwinkle](https://openvidu.discourse.group/u/Bullwinkle)\
**Post date:** [August 21, 2021, 9:35am UTC](https://openvidu.discourse.group/t/openvidu-browser-npm-package-doesnt-work-without-babel/3296/16 "2021-08-21T09:35:19Z")

</div>

Hi @micael.gallego i found out right way of importing compiled JS!

As long as compiled OpenVidu-browser is self-invoked js function, this works for me:

```auto
import "../assets/openvidu-browser-2.18.0.min.js";

...
mounted(){
 // Get Token from backend
 let body = { secret: this.secret, room: this.roomId };

      postFetch("api2/video", body).then((respond) => {
        // When token recieved from backend start your connection

        this.token = respond;
        this.joinSession(); // Start you openvidu logic here   
      });
}

```

This seems to me more correct way of importing openvidu-browser.js, as in this case \*.js will be included in final build of application. Final size of Video.js chunk in my build is 231 kb.

As long as i don’t know how to make OpenVidu-npm package work with Vite, will mark this as solution.

@mihailj probably it would be somehow helpful for you

@micael.gallego@mihailj Thank you guys for you help with investigating this case

---

<div class="post-metadata">

**Author:** ![micael.gallego](https://yyz2.discourse-cdn.com/free1/user_avatar/openvidu.discourse.group/micael.gallego/32/2_2.png) [@micael.gallego](https://openvidu.discourse.group/u/micael.gallego)\
**Post date:** [August 21, 2021, 10:10am UTC](https://openvidu.discourse.group/t/openvidu-browser-npm-package-doesnt-work-without-babel/3296/17 "2021-08-21T10:10:02Z")

</div>

Thank you for sharing your findings