I'm on [email protected] and am trying to use this web assembly library 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;
});

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;
});

• javascript
• webpack
• webassembly

• 1 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 Commented Jul 9, 2020 at 14:30
• @RobertRowntree I went through all the comments, still unsure what your suggestion is – Ilja Commented Jul 9, 2020 at 14:46

1 Answer 1

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