Skip to content

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

@sysebert

Description

@sysebert

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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions