Trying to understand how to import web-assembly package via webpack

Question

I'm on [email protected] and am trying to use this web assembly library https://github.com/vislyhq/stretch As per docs I am importing some classes from it i.e.

import { Allocator, Node } from 'stretch-layout';

class Base {
  public layoutNode;

  public constructor() {
    this.layoutNode = new Node(allocator, {});
  }
}

However when I am trying to build it with webpack (not using any loaders and I have .wasm in my resolve.extensions webpack config) I am getting following error

WebAssembly module is included in initial chunk. This is not allowed, because WebAssembly download and compilation must happen asynchronous. Add an async splitpoint (i. e. import()) somewhere between your entrypoint and the WebAssembly module:

To my understanding I need to use import() for this module, but how do I make these imports available to my class? Application will fail since we need to await that import? If I do something like this I get an error saying that Allocator and Node are not constructors.

let Allocator: any = null;
let Node: any = null;

import('stretch-layout').then(module => {
  Allocator = module.Allocator;
  Node = module.Node;
});

near the end of this link is relevant to getting functional '.wasm' loader to work in context of a build on libs containing empscriptem type components . gist.github.com/surma/b2705b6cca29357ebea1c9e6e15684cc — Robert Rowntree
– Robert Rowntree, Commented Jul 9, 2020 at 14:30
@RobertRowntree I went through all the comments, still unsure what your suggestion is — Ilja
– Ilja, Commented Jul 9, 2020 at 14:46

Ilja · Accepted Answer · 2020-07-09 18:40:59Z

19

I was able to solve this using latest beta of webpack 5, by adding following experimental flags to config

  experiments: {
    asyncWebAssembly: true,
    importAsync: true
  }

this way you don't have to worry about any async import() statements at all

answered Jul 9, 2020 at 18:40

Ilja

46.8k103 gold badges294 silver badges530 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Klesun Over a year ago

importAsync was removed from webpack recently, but just asyncWebAssembly seems to be enough.

Klesun Over a year ago

Oh, actually, it was just updating webpack from v4.4.1 to v5.1.3 what fixed the issue for me - specyfing experiments in the configuration was not required at all.

Collectives™ on Stack Overflow

Trying to understand how to import web-assembly package via webpack

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related