Develop Reference

Error when Requiring Twilio Voice SDK Javascript

I have included (via npm) the twilio/voice-sdk package (v.2.1.0) into a project. When I include the following code (as shown in many examples):
const Device = require('#twilio/voice-sdk').Device;
I get a console error stating:
"Cannot find module 'events' in '#twilio/audioplayer/es5'". I am trying to import this onto the client side, not server.
I get this whether I use require or import.
As an attempt around this, I have also include the node package #twilio/audioplayer, but to no avail. Kind of stuck as to what is going on here.
I am trying to use this on a Wix (or Velo more specifically) project. Hoping to create a dialer that can both answer and instigate phone calls on a site that already exists on that platform.
I have installed both of the above npm packages into my project, but get he above enumerated error.
Any ideas from the Internet?
Additional Information:
If I add the 'require' on the server side I do not get the same error. I was going to try this and then do an async call to the server to get my Device object. However, the Twilio Device SDK package utilizes the Window object, which of course does not exist on the server side.

The #twilio/audioplayer package uses the "events" module. This module is available in Node.js and when applications are bundled with something like Webpack is polyfilled.
I haven't used Velo, but I assume they are bundling differently in a way that doesn't add polyfills for this. I'd recommend installing the events npm module to your project too. That should provide the EventEmitter that the library is using for the browser environment and stop this error.

I had a similar problem, where I can import Device, but cannot construct it. The problem I had was that the bundler (in my case Vite) doesn't have a polyfill to run some functions inside the #twilio/voice-sdk.
The solution in my case was by installing polyfill on Vite.
Here is how:
First, install these packages:
npm i #esbuild-plugins/node-globals-polyfill #esbuild-plugins/node-modules-polyfill --save-dev
Then add the polyfill config to your vite.config.js. Here is link of the code: https://medium.com/#ftaioli/using-node-js-builtin-modules-with-vite-6194737c2cd2.
Because I use React, I still need to add plugins: [react()] inside the polyfill config. So it becomes something like:
export default defineConfig({
plugins: [react()],
// rest of the polyfill config
})
Now you can do:
import { Device } from "#twilio/voice-sdk";
new Device(token);

does not provide an export named 'BrowserQRCodeReader'

I am using zxing-js/library library for qr code reading. I am facing a strange issue. The code for the qr scanning works in stackblitz online sample code, but not in my local environment.
I am getting this error in local environment on run time. The compilation proceeds successfully.
Uncaught SyntaxError: The requested module '/node_modules/#zxing/library/esm5/index.js' does not provide an export named 'BrowserQRCodeReader'
stackblitz link
github link

It seems like the zxing-js/library has issues with bundling.
I can reproduce the error by running npm run build, followed by npm run start.
Looks like some bundling would be required for you to get this working in the browser. See this post for more info
In the meantime, you can use npm run start:dev, and you will be able to do local development as expected.
Thanks #passle_ from the #open-wc team for helping with this.

In addition to jlengrands answer, npm start will start the owc-dev-server which does a minimal amount of work; it'll only resolve the bare modules.
The QR code library that you're trying to use uses commonjs, it'll need a little magic to be transformed so the browser can understand that code. The webpack-dev-server can do this for you, which you can run with npm run start:dev.

How to import wasm in web workers with webpack?

is it possible with webpack to import wasm in workers? In my normal js code i can import wasm like this:
import('../wasm/hello_world.wasm').then(module => {
console.log(module.add_one(9))
})
the same code does not work inside a worker. It returns the following error message:
Uncaught TypeError: Cannot read property './src/wasm/hello_world.wasm' of undefined
My webpack config is a combination of the webpack worker and wasm examples.
https://github.com/webpack/webpack/tree/master/examples/web-worker
https://github.com/webpack/webpack/tree/master/examples/wasm-simple

Based on the original question and the comment it looks like there is interest in solving this for both C / Emscripten and Rust compiled WASM.
I found the following article that explains very nicely how to achieve the results for Emscripten generated wasm here:
https://medium.com/#c.gerard.gallant/webassembly-web-workers-f2ba637c3e4a
As for Rust, I was going to come up with my own solution to this and provide a github repo to accompany my answer but during the course of my research I discovered that this developer had already solved the problem quite nicely already and kindly provided us with a ready to use template.
Thank you Victor Gavrish!
https://github.com/VictorGavrish/rust-wasm-worker-template
The steps in the README.md are a little out of date. I was able to build and run the project by doing the following:
clone the repo locally and execute:
cd rust-wasm-worker-template/www
npm install
npm run build
npm run start
Once webpack is finished bundling everything the dev site will be available from the URL provided on the console.
The important things to remember, in general, are the limitations of webworkers. There is no direct access to the dom or console, you have to handle passing messages from the worker to the main thread and then output to console. I mention this specifically because the OP used an example that called console.log...

unexpected reserved word import in node.js

I'm trying to run node.js backend server. I've received error unexpected reserved word on import in Node.js file.
The lines in file core.module.js is:
'use strict';
import lodashMixins from './lodashMixins.js'
... other imports and configurations ...
I launch simple command: node core.module.js
It's not uncommon error, but usually it happens with other libraries. I haven't seen solution for Node.js. How should I fix this? I'm using Windows Server.
Edit: I've find out that it's ES6, but how could I launch it? It looks like backend for the application, but I have no idea what command should I use to launch it without errors.

import is a part of ECMAScript 2015 (ES6) standard and as Amit above mentioned it is not currently implemented natively in Nodejs.
So you can use transpiler like babel to run your es6 script
npm install babel
An example based on this answer
app.js
import {helloworld,printName} from './es6'
helloworld();
printName("John");
es6.js
module.exports = {
helloworld: function() { console.log('hello world!'); },
printName: function(name) { console.log(name); }
}
And using require hook in start.js
require("babel/register");
var app = require("./app.js");
And start your app as
node start.js
EDIT
The above answer was base on babel v5.8.23. For babel >= v6
Use require hook in start.js as
require('babel-core/register');
require("./app.js");
Also, transformations are not enabled by default. So you will need to install a preset. In this case use es2015
npm install babel-preset-es2015
And use it in a .babelrc file in root folder
{
"presets": ["es2015"]
}

The import keyword is part of the modules feature in ECMAScript 2015, along with export and a few other specifications.
It is currently not implemented natively in NodeJS, even on the lastest version (v0.12.7), nor is it supported in the ES2015 "friendlier" fork iojs.
You will need to use a transpiler to get that to work.
[edit] it's still unsupported in the latest version (v5.8) despite the existence of an --harmony_modules flag, which does nothing. Your best run is to use babel, as explained here and here

I ran into this issue as I manually install any of these tools outside of Visual Studio. But Visual Studio ships with multiple open source command line tools that are used in modern web development workflows. Here’s how you can tell Visual Studio to use the same version that you have manually installed
Go to Tools –> Options –> Projects and Solutions –> External Web Tools
Set the global PATH environment variable before the internal path, you can just use the arrows at the top-right to change the order.
or
First, find the Node.js installation you already have and use at the command line. By default, Node.js 0.12.7 installs to “C:\Program Files\nodejs”. Add this entry at the top to the path to the node.js directory to force Visual Studio to use that version instead

This may not be the official answer, but I stumbled here after searching around for the 'unexpected reserved word'. After poking around, I discovered my problem was that, in fact, I just needed to run an npm install after having updated my branch from origin / rebasing. Hope this helps someone else who is furiously reverting their code trying to figure out what they broke! :)

JSDOM error in attribute.js

I'm using mocha for unit tests and trying to use jsdom for html elements on my unit tests.
I downloaded the jsdom.zip and imported the library for my tests, and get stuck on this error:
jsdom/living/attributes.js:114
for (const name of Object.getOwnPropertyNames(prototype)) {
^^ SyntaxError: Unexpected identifier
I tried to find the cause of this error message on Google but unfortunately I wasn't able to find an answer.

The latest JSDOM does not work with older versions of Node (the syntax error is probably the ES6 const). As the readme says:
Note that as of our 4.0.0 release, jsdom no longer works with
Node.js™, and instead requires io.js. You are still welcome to install
a release in the 3.x series if you use Node.js™.
Try upgrading to latest Node or downloading version 3.x (also, NPM might make this much easier than downloading ZIP files :)