Error: No transformers found for [...] wasm

[lgarron]

🐛 bug report

WASM support does not work.
https://parceljs.org/webAssembly.html

🎛 Configuration (.babelrc, package.json, cli command)

No config.

🤔 Expected Behavior

The example from https://parceljs.org/webAssembly.html works out of the box.

😯 Current Behavior

> npx parcel index.html
ℹ️ Server running at http://localhost:1234
🚨 Build failed.
Error: No transformers found for /Users/lgarron/Desktop/parcel-wasm-test/add.wasm.
Error: No transformers found for /Users/lgarron/Desktop/parcel-wasm-test/add.wasm.
    at ParcelConfig._getTransformerNodes (/Users/lgarron/Desktop/parcel-wasm-test/node_modules/@parcel/core/lib/ParcelConfig.js:185:13)
    at ParcelConfig.getTransformers (/Users/lgarron/Desktop/parcel-wasm-test/node_modules/@parcel/core/lib/ParcelConfig.js:198:34)
    at Transformation.loadPipeline (/Users/lgarron/Desktop/parcel-wasm-test/node_modules/@parcel/core/lib/Transformation.js:657:48)
    at Transformation.run (/Users/lgarron/Desktop/parcel-wasm-test/node_modules/@parcel/core/lib/Transformation.js:315:31)
    at async Child.handleRequest (/Users/lgarron/Desktop/parcel-wasm-test/node_modules/@parcel/workers/lib/child.js:255:9)

💁 Possible Solution

Not sure.

🔦 Context

Trying to check if Parcel WASM support is production-ready.

💻 Code Sample

See https://github.com/lgarron/parcel-issue-6284

<!-- index.html -->
<script src="index.ts"></script>

// index.ts
import { add } from "./add.wasm";
console.log(add(2, 3));

🌍 Your Environment

Software	Version(s)
Parcel	2.0.0-nightly.660+177f8eec
Node	v16.0.0
npm/Yarn	7.11.2
Operating System	macOS 10.15.7

[danieltroger]

Trying to check if Parcel WASM support is production-ready.

They just changed the scope hoisting implementation to SWC to become faster, see #6230

And it basically ruined the production readyness. Try downgrading to 2.0.0-nightly.650+dc79abcd which is slower but much more stable.

[mischnic]

This has nothing to do with the switch to SWC.

import { add } from "./add.wasm";

That is the proposed syntax for https://github.com/WebAssembly/esm-integration/tree/master/proposals/esm-integration.

The problem is that wasm imports are essentially equivalent to importing a JS file that has a top level await statement. And we also don't support that yet. (Parcel 1's implementation of that doesn't really work once you start importing from a module that imports wasm.)

What you can do for now is

import wasmURL from "url:./add.wasm";

const wasmModule = WebAssembly.instantiateStreaming(fetch(wasmURL)).then(obj => obj.instance.exports);

function something(){
	console.log((await wasmModule).add(1,2));
}

(or fetch(new URL("./add.wasm", import.meta.url)) instead of that import.

[lgarron]

Thanks!

What you can do for now is

import wasmURL from "url:./add.wasm";

const wasmModule = WebAssembly.instantiateStreaming(fetch(wasmURL)).then(obj => obj.instance.exports);

function something(){
	console.log((await wasmModule).add(1,2));
}

(or fetch(new URL("./add.wasm", import.meta.url)) instead of that import.

Would it be worth updating https://parceljs.org/webAssembly.html to reflect this or is the goal to support the documented syntax in the near future?

[mischnic]

That page is for Parcel 1 anyway. The Parcel 2 docs https://v2.parceljs.org don't mention Webassembly at all.

It would be great to support this, but there are other priorities right now...

[DoctorNefario]

The Parcel 2 docs https://v2.parceljs.org don't mention Webassembly at all.

Directly from your link:

Parcel supports many different languages and file types out of the box, from web technologies like HTML, CSS, and JavaScript, to lower level languages like Rust, and anything that compiles to WebAssembly (WASM), to assets like images, fonts, videos, and more.

That line should probably be removed until v2 supports WASM.

[mischnic]

Good point: parcel-bundler/website#861

[mischnic]

Closing in favor of #1325

In the meantime, you use new URL("...", import.meta.url) to get a url to the wasm file to then use fetch and the usual Wasm web API