Support Parcel 2 in WebContainers

[rajsite]

🙋 feature request

I'm interested in using Parcel in WebAssembly contexts such as StackBlitz WebContainers (relevant StackBlitz issue) and in the VSCode Web Extension context.

The former is to create sample projects made with parcel that are managed on GitHub and imported to stackblitz using the Import from GitHub feature. A great way to let our users get started with library and see the power of Parcel's out-of-box experience.

🤔 Expected Behavior

I can leverage Parcel in contexts where WebAssembly is the only native option.

😯 Current Behavior

Parcel fails to run in stackblitz (in the following example cli do npm run build): https://stackblitz.com/edit/parcel-2-web-container-error?file=index.ts

Have not tried but assume parcel will not run in VSCode Web Extension context as per docs linked above:

The browser runtime environment only supports the execution of JavaScript and WebAssembly. Libraries written in other programming languages need to be cross-compiled, for instance there is tooling to compile C/C++ and Rust to WebAssembly.

💁 Possible Solution

• Add WebAsembly exeuction support
• If Parcel does not have it on the roadmap, can look at alternatives

🔦 Context

We are creating a web component-based custom element framework and would like to encourage users to use Parcel to enabled TypeScript and SCSS usage out of the box in Vanilla / Frameworkless applications. We would like to use Stackblitz for sharing examples / issue reproduction templates. Also eyeing VSCode Web Extensions for a similar use-case via github.dev. Shoot if Parcel shipped a vscode web extension that worked in GitHub.dev that might be perfect.

💻 Examples

See above in Current Behavior.

[devongovett]

We do have web assembly builds of our native modules, e.g. https://github.com/parcel-bundler/parcel/tree/v2/packages/transformers/js/wasm. They are used on https://parcel2-repl-mischnic.vercel.app/ for example. But you have to shim a whole bunch of things, like using Parcel's memory file system rather than a real one. I'm not really sure how we could make the CLI work automatically in a browser context though, because it doesn't use the wasm build and relies heavily on the file system.

[rajsite]

I'm not really sure how we could make the CLI work automatically in a browser context though, because it doesn't use the wasm build and relies heavily on the file system.

Does the file I/O in the CLI happen via node.js file APIs? The StackBlitz Web Container context is a node environment. See the following quick example: https://stackblitz.com/edit/node-fileio?file=index.js

Or is the issue that the native modules are performing File I/O directly? If that's the case could they be compiled with WASI? Not sure if StackBlitz supports WASI in its node context yet but I imagine it could be polyfilled.

[devongovett]

Both. Parcel has a FileSystem abstraction in the @parcel/fs package. We do all of our FS operations through that. There are two implementations: NodeFS and MemoryFS. The CLI always uses NodeFS. If a NodeFS is used, we make an assumption that you are using a real file system. In that case, the cache uses lmdb, which is a native C++ module. I don't believe it has a WASM build.

[FossPrime]

Logs:

$ parcel index.html courses/**/* --open
_0x5037b1 [Error]: Cannot load native addon because loading addons is disabled.
    at process.dlopen (https://node-rma527.w.staticblitz.com/blitz.5bca79c80956550a0ee18f24bf5b874e18bb8626.js:15:193771)
    at Object.Module._extensions..node (https://node-rma527.w.staticblitz.com/blitz.5bca79c80956550a0ee18f24bf5b874e18bb8626.js:6:196774)
    at Module.load (https://node-rma527.w.staticblitz.com/blitz.5bca79c80956550a0ee18f24bf5b874e18bb8626.js:6:194488)
    at Function.Module._load (https://node-rma527.w.staticblitz.com/blitz.5bca79c80956550a0ee18f24bf5b874e18bb8626.js:6:192091)
    at Module.require (https://node-rma527.w.staticblitz.com/blitz.5bca79c80956550a0ee18f24bf5b874e18bb8626.js:6:194806)
    at i (https://node-rma527.w.staticblitz.com/blitz.5bca79c80956550a0ee18f24bf5b874e18bb8626.js:6:349630)
    at _0x2ab051 (https://node-rma527.w.staticblitz.com/blitz.5bca79c80956550a0ee18f24bf5b874e18bb8626.js:15:101485)
    at Object.eval (/home/projects/node-rma527/node_modules/@parcel/source-map/parcel_sourcemap_node/index.js:15:18)
    at Object.function (https://node-rma527.w.staticblitz.com/blitz.5bca79c80956550a0ee18f24bf5b874e18bb8626.js:15:101848)
    at Module._compile (https://node-rma527.w.staticblitz.com/blitz.5bca79c80956550a0ee18f24bf5b874e18bb8626.js:6:196043) {
  code: 'ERR_DLOPEN_DISABLED'
}

🔦 Context

I'm running Stackblitz on an HP 14c. The error happens on cloud projects and on on-disk projects.

💻 Code Sample

Vanilla TS Sandbox

🌍 Your Environment

Software	Version(s)
Parcel	2.3
Node	16.14
npm/Yarn	7.17
Operating System	ChromeOS / Stackblitz WebContainers

[arindam89]

Is there any proposal here to make tools like parcel work in Web Containers.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.

[simonpai]

IMHO even if there's no explicit roadmap on this topic we should keep this issue open? It's a quite valuable feature.

[nc7s]

In the same situation, but more surprised by parcel not having a graceful degradation that when native modules are unavailable switches to a "pure JS" implementation.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.

[mischnic]

With https://github.com/parcel-bundler/parcel/pull/9328 and https://github.com/parcel-bundler/parcel/pull/9365, if packaged/build correctly Parcel can run int he browser. The question is how we can make it use the right codepaths for WebContainers now

[GeeekyBoy]

With #9328 and #9365, if packaged/build correctly Parcel can run int he browser. The question is how we can make it use the right codepaths for WebContainers now

You can check if Parcel is running inside a WebContainer by checking if the version of the WebContainer exists as follows:

const isWebContainer = process.versions.hasOwnProperty('webcontainer');

Have I understood the problem correctly?

[phaux]

Still doesn't work out of the box on StackBlitz