2d-inc / Flare-JS

Flare Javascript ES6 runtime with Canvas rendering.
https://flare.rive.app
MIT License
265 stars 59 forks source link

Is there a WebPack way of using this package? #40

Open sysebert opened 4 years ago

sysebert commented 4 years ago

I had a look at the React version to see if I could find any hints, but no luck.

I'm using Vue with WebPack, but I can't seem to get Graphics to initialize.

Here is a sample script of how I'm handling things:

import {Graphics} from '@2dimensions/flare-js';

// fixes the "ReferenceError: CanvasKitInit is not defined" error
window.CanvasKitInit = require('@2dimensions/flare-js/canvaskit/canvaskit');

export default {
  data() {
    return {
      graphics: undefined,
    };
  },
  mounted() {
    const canvas = this.$refs.canvas;
    if (canvas) {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      this.graphics = new Graphics(canvas);
      this.graphics.initialize(() => {
        console.log('Initialized!!');
      });
    }
  },
};

Here are the various logs, warnings, errors:

canvaskit.js?8997:60 wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.

falling back to ArrayBuffer instantiation

canvaskit.js?8997:59 failed to asynchronously prepare wasm: CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0

CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0

Uncaught (in promise) abort({}). Build with -s ASSERTIONS=1 for more info.

Uncaught (in promise) CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0

Image as well to cross reference:

image

Appreciate any help anyone has!

SebSaveBySolar commented 4 years ago

Running into the same problem, is there a solution to this?