# how to produce mediasoup-client.js

**URL:** <https://mediasoup.discourse.group/t/how-to-produce-mediasoup-client-js/5299>\
**Category:** mediasoup libraries\
**Created:** [June 16, 2023, 5:44am UTC](https://mediasoup.discourse.group/t/how-to-produce-mediasoup-client-js/5299 "2023-06-16T05:44:37Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![shitizenlism](https://yyz2.discourse-cdn.com/free1/user_avatar/mediasoup.discourse.group/shitizenlism/32/1594_2.png) [@shitizenlism](https://mediasoup.discourse.group/u/shitizenlism)\
**Post date:** [June 16, 2023, 5:44am UTC](https://mediasoup.discourse.group/t/how-to-produce-mediasoup-client-js/5299/1 "2023-06-16T05:44:37Z")

</div>

I write a webpack.config.js and run webpack –mode production to get ./dist/mediasoup-client.js

when I run the following code, it appears that TypeError: cannot read properties of undefined (reading ‘Device’). What happened? Anyone could help me with this? Thanks in advance.

let device = null; try { device = new MediasoupClient.Device(); } catch (err) { if (err.name === “UnsupportedError”) { console.error(“mediasoup-client doesn’t support this browser”); return; } } global.mediasoup.device = device;

webpack.config.js  
‘  
const path = require(‘path’);

module.exports = {  
entry: ‘./lib/index.js’,  
output: {  
filename: ‘mediasoup-client.js’,  
path: path.resolve(\_\_dirname, ‘dist’),  
},  
};  
‘  
I use npm run typescript:build to get lib/index.js

---

<div class="post-metadata">

**Author:** ![shitizenlism](https://yyz2.discourse-cdn.com/free1/user_avatar/mediasoup.discourse.group/shitizenlism/32/1594_2.png) [@shitizenlism](https://mediasoup.discourse.group/u/shitizenlism)\
**Post date:** [June 16, 2023, 5:48am UTC](https://mediasoup.discourse.group/t/how-to-produce-mediasoup-client-js/5299/2 "2023-06-16T05:48:45Z")

</div>

I have tried another webpack.config.js as follows. The result is the same. run MediasoupClient.Device() causes TypeError of undefined function.

const path = require(‘path’);

module.exports = {  
mode: ‘development’,  
entry: ‘./src/index.ts’,  
output: {  
filename: ‘mediasoup-client.js’,  
path: path.resolve(\_\_dirname, ‘dist’),  
},  
module: {  
rules: [  
{  
test: /.ts$/,  
use: ‘ts-loader’,  
exclude: /node-modules/  
}  
]  
},  
resolve: {  
extensions: [‘.ts’, ‘.js’]  
}  
};

---

<div class="post-metadata">

**Author:** ![zaidiqbal](https://yyz2.discourse-cdn.com/free1/user_avatar/mediasoup.discourse.group/zaidiqbal/32/1498_2.png) [@zaidiqbal](https://mediasoup.discourse.group/u/zaidiqbal)\
**Post date:** [June 16, 2023, 7:19am UTC](https://mediasoup.discourse.group/t/how-to-produce-mediasoup-client-js/5299/3 "2023-06-16T07:19:57Z")

</div>

There is a better way of doing it, instead of converting mediasoup-client to vanila js, just include the mediasoup-client library from node\_modules into your js file lets say call.js and then do your stuff as mentioned in the docs in that file and use webpack to bundle that call.js file.

---

<div class="post-metadata">

**Author:** ![shitizenlism](https://yyz2.discourse-cdn.com/free1/user_avatar/mediasoup.discourse.group/shitizenlism/32/1594_2.png) [@shitizenlism](https://mediasoup.discourse.group/u/shitizenlism)\
**Post date:** [June 16, 2023, 7:45am UTC](https://mediasoup.discourse.group/t/how-to-produce-mediasoup-client-js/5299/4 "2023-06-16T07:45:39Z")

</div>

yes. I understand what you refer. could you please review my webpack.config.js as follows?  
‘  
const path = require(‘path’);

module.exports = {  
entry: ‘./lib/index.js’,  
output: {  
filename: ‘bundle.js’,  
path: path.resolve(\_\_dirname, ‘dist’),  
},  
};  
‘ I encounter the same issue that Device undefined(TypeError).

---

<div class="post-metadata">

**Author:** ![snnz](https://yyz2.discourse-cdn.com/free1/user_avatar/mediasoup.discourse.group/snnz/32/693_2.png) [@snnz](https://mediasoup.discourse.group/u/snnz)\
**Post date:** [June 16, 2023, 11:58am UTC](https://mediasoup.discourse.group/t/how-to-produce-mediasoup-client-js/5299/5 "2023-06-16T11:58:06Z")

</div>

So, what is ‘MediasoupClient’? Where do you import or assign it?

---

<div class="post-metadata">

**Author:** ![zaidiqbal](https://yyz2.discourse-cdn.com/free1/user_avatar/mediasoup.discourse.group/zaidiqbal/32/1498_2.png) [@zaidiqbal](https://mediasoup.discourse.group/u/zaidiqbal)\
**Post date:** [June 16, 2023, 3:25pm UTC](https://mediasoup.discourse.group/t/how-to-produce-mediasoup-client-js/5299/6 "2023-06-16T15:25:19Z")

</div>

Yes this seems fine, show us the full code, how you are including mediasoup-client into your code, and how you are bundling mediasoup-client?

---

<div class="post-metadata">

**Author:** ![shitizenlism](https://yyz2.discourse-cdn.com/free1/user_avatar/mediasoup.discourse.group/shitizenlism/32/1594_2.png) [@shitizenlism](https://mediasoup.discourse.group/u/shitizenlism)\
**Post date:** [June 19, 2023, 2:08am UTC](https://mediasoup.discourse.group/t/how-to-produce-mediasoup-client-js/5299/7 "2023-06-19T02:08:28Z")

</div>

fixed.  
write a index.js as follows, then use webpack to produce the mediasoup-client.js for web using.  
const client = require(‘mediasoup-client’)  
window.mediasoupClient = client