Cannot load wasm asynchronously

[mbalex99]

I cannot seem to load wasm properly in my test code.

Current behavior

When trying to run a test that includes wasm code like so:

describe("sum test", function () {
  it("should be able to run a sum test", async () => {
    const { sum } = await import("../internal/wasm_pack_ts_cypress")
    expect(sum(1, 2)).to.equal(3);
  });
});

I get:

       should be able to run a sum test:
     ChunkLoadError: Loading chunk 0 failed.
(missing: http://localhost:53142/__cypress/iframes/integration/0.sum-async-import.spec.ts.js)
      at Function.requireEnsure [as e] (http://localhost:53142/__cypress/tests?p=src/sum-async-import.spec.ts:119:26)
      at Context.eval (http://localhost:53142/__cypress/tests?p=src/sum-async-import.spec.ts:261:51)

Or when loading synchronously:

describe("sum test", function () {
  it("should be able to run a sum test", async () => {
    expect(sum(1, 2)).to.equal(3);
  });
});

I get this error:

The error was:

Error: Webpack Compilation Error
./internal/wasm_pack_ts_cypress_bg.wasm
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:
* multi ./src/sum-import.spec.ts --> ./src/sum-import.spec.ts --> ./internal/wasm_pack_ts_cypress.js --> ./internal/wasm_pack_ts_cypress_bg.wasm
* ... --> ./internal/wasm_pack_ts_cypress.js --> ./internal/wasm_pack_ts_cypress_bg.js --> ./internal/wasm_pack_ts_cypress_bg.wasm

I suspect this has something to do with the webpack config that cypress uses does not properly load wasm by default.

Desired behavior

No errors when loading wasm

Test code to reproduce

Reproducible repository can be found here: https://github.com/mbalex99/wasm-pack-ts-cypress Please follow the simple instructions.

Versions

  │ Cypress:    5.3.0                                                                              │
  │ Browser:    Electron 83 (headless)

[bahmutov]

Yeah, that's why we disable dynamic import in component tests https://github.com/bahmutov/cypress-react-unit-test/tree/main/cypress/component/advanced/lazy-loaded but let me look at this in detail. You probably want to make a static page where you bundle and load WASM and just cy.visit('http://localhost:3000') from the test

[bahmutov]

So the webpack settings Cypress uses disable chunking, thus the separate chunk fails to load. I will try to create an example where the bundling is done using separate webpack, and Cypress just requests that page

[bahmutov]

@mbalex99 I have made the test work in https://github.com/bahmutov/cypress-example-wasm-ts see the README there. I think for now this would be better approach than rewriting the Cypress Webpack preprocessor to handle multiple bundles and serve WASM bundle.

[bahmutov]

Wrote a blog post https://glebbahmutov.com/blog/cypress-wasm-example/

[cypress-app-bot]

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

[cypress-app-bot]

This issue has been closed due to inactivity.