How to import wasm in web workers with webpack? - javascript

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...

Related

React is undefined while using rollup to bundle as esm

Rather than having a single bundle for my rollup react app in development, I split it into two bundles. One for the dependencies and one for the app itself.
This way the watch mode stays fast (as it now doesn't has to parse the dependencies continously) and I don't have to write (or use third party) es module wrappers for libraries such as React.
While the code is bundled without any errors, I run into TypeError: React is undefined while running it. When I check the network panel in developer tools I do see the dependency bundles getting downloaded.
Here is how I am using rollup with its API.
You can see the rest of the relevant code here.
Can anyone point out what am I doing wrong? Any help appreciated!
This is a bug in the latest #rollup/plugin-commonjs version (14.0.0). It was fixed with the merge of this PR, but this hasn't been released to NPM yet. I went and built the latest version from GitHub, and used it with the repo in question, and React is now working.
So for now the solution is to use the latest source on GH until the next version is published.

TypeScript finds imports, but Chrome+JavaScript doesn't

I’m trying to use a TypeScript library (zxing-typescript in particular).
My typescript file begins with:
import * as ZXing from '../../lib/#zxing/library'
// Also happens when importing from '../../lib/#zxing/library/esm' and '../../lib/#zxing/library/esm/index'
The resulting JavaScript file contains the import verbatim. In all cases, TypeScript is correctly finding ../../lib/#zxing/library/esm/index.d.ts and giving me proper completion and compile errors, but running the resulting JavaScript from the latest Chrome Version 80.0.3987.132 (Official Build) (64-bit), I get a 404 looking for a file named library.
Things get a little better if I begin the TypeScript file with:
import * as ZXing from '../../lib/#zxing/library/esm/index.js'
but index.js contains lines such as
export * from './browser/BrowserBarcodeReader';
referring to ./browser/BrowserBarcodeReader.js. Again, if I go into the library and edit index.js to include the extension, the situation continues to improve, but many of the dependencies have dependencies of their own and I get similar issues.
How were index.js and index.d.ts meant to be used?
(Hopefully this question isn’t a duplicate of Does ES6 import/export need ".js" extension?, as I can’t imagine plan A is to change the server settings to check for JS files).
EDIT: The library "#zxing/library#0.15.2" is getting pulled from jsdelivr (one of the package managers suggested by Visual Studio 2019's libman), but I tried looking into some other forms of the zxing library.
The one suggested by this link gave C++ errors when installing dependencies (npm install) and TypeScript errors when compiling (tsc) related to some of the #types (I recognized Chai and was surprised such a big name library was giving errors).
Were successfully using zxing with straight JavaScript by including UMD/index.min.js, the name suggesting the UMD module works fine. There's no typescript definitions in the UMD directory, but maybe there's a way to have TypeScript figure some of the module information out from that JavaScript file.
I'm new to a lot of this, so user error isn't out of the question.
Any further guidance would be appreciated, but I mainly wanted to thank everyone for their help and let you know I did try your suggestions.

Tabris.js playground examples do not work due to async function

I want to start coding with Tabris.js, and try to get some experience with the playground. But every example which uses
async function asyncFunctionName(...)
doesn't start. The error message is:
Could not load main module: Error: Could not parse ./app.js:./app.js:7:
SyntaxError: Unexpected token function
async function showActionSheet() {
^^^^^^^^
com.eclipsesource.v8.V8ScriptCompilationException
at subscribe (./cordova.js:758:11)
at addEventListener (./cordova.js:133:34)
at _entryPoint (./cordova.js:1560:18)
The simple examples like hello.js work well. The shipped examples in the tabris developer app work well.
What am I doing wrong?
Comparing the output of what the Playground generates to what's inside the app they are definitely different. Tabris.js on Android does not yet support the async/await syntax natively (but iOS does).
This looks like a bug in implementation of the Playground, so it'd be worthwhile to open an issue for that. In the meantime, you can also clone the repo and run the snippets using the instructions included in the snippets directory:
npm install -g tabris-cli
git clone https://github.com/eclipsesource/tabris-js
cd tabris-js/snippets
tabris serve -m dist/actionsheet.jsx

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.

NPM modules in Grunt based projects

Node has a simple module loading system which uses require() method call to load modules from different locations in the root folder.
E.g.
var qr = require('qr-image');
I am trying to do something similar in grunt but i am unsuccessful with that.
I had added this module to package.json file in the following fashion and then ran npm install at root directory of the project.
"devDependencies": {
.
.
.
"qr-image": "^2.0.0"
},
Now whenever I use require I get the following error on console and my code breaks.
ReferenceError: require is not defined
Please suggest as how to use the npm module in Grunt based project, Thanks.
The require function isn't available in web browsers. Instead it's part of nodejs, which is a server-side language (e.g., something you might run directly from your computer terminal, not in a browser) and used to load dependencies in that language.
In a web browser, I usually just include my dependencies as additional scripts on the page, e.g.,:
<script src="path/to/my/dependency.js"></script>
<script src="path/to/my/code.js"></script>
Some other options are RequireJS or what's listed in this question or as more of a general purpose dependency manager for front-end code: Bower.
Looking closer at your question, it's likely that the "qr-image" npm dependency won't work in client-side code for you (since it was built to run via node in server-side code).
A quick search for QR code client-side code brought up this SO post, which points to the QRCode.js project for client-side QR code generation—I haven't used it, but it looks like a step in the right direction for what you're working on.

Categories

Resources