Skip to content

Annoying logs when loading canvaskit wasm #3

@softmarshmallow

Description

@softmarshmallow
import init from "canvaskit-wasm/bin/canvaskit";

init({
      locateFile: (file: string) =>
        "https://unpkg.com/canvaskit-wasm@0.25.0/bin/" + file,
    }),

When using canvaskit on nodejs, as listed on README on skia's canvaskit docs it's recommanded to use local node_module/canvaskit-wasm's .wasm file, but when loading from unpkg, it loads initially but still canvaskit init will try to use it as local directory which will cause transforming https:// to http:/ wich is not a problem though, we'll need to configure custom webpack to load wasm from local package.

Canvaskit's doc
https://github.com/google/skia/search?q=locatefile

Browser
To use the library, run npm install canvaskit-wasm and then simply include it:

<script src="/node_modules/canvaskit-wasm/bin/canvaskit.js"></script>
CanvasKitInit({
    locateFile: (file) => '/node_modules/canvaskit-wasm/bin/'+file,
}).then((CanvasKit) => {
    // Code goes here using CanvasKit
});
As with all npm packages, there's a freely available CDN via unpkg.com:

<script src="https://unpkg.com/canvaskit-wasm@0.18.1/bin/canvaskit.js"></script>
CanvasKitInit({
     locateFile: (file) => 'https://unpkg.com/canvaskit-wasm@0.18.1/bin/'+file,
}).then(...)
Node
To use CanvasKit in Node, it's similar to the browser:

const CanvasKitInit = require('/node_modules/canvaskit-wasm/bin/canvaskit.js');
CanvasKitInit({
    locateFile: (file) => __dirname + '/bin/'+file,
}).then((CanvasKit) => {
    // Code goes here using CanvasKit
});

" We cannot use __dir + as listed above since NextJS will replace __dir with "/" - still file not found

The annoying message is...

Error: ENOENT: no such file or directory, open 'https:/unpkg.com/canvaskit-wasm@0.25.0/bin/canvaskit.wasm'
    at Object.openSync (fs.js:476:3)
    at Object.readFileSync (fs.js:377:35)
    at Fa (/Users/softmarshmallow/Documents/Apps/bridged/nothing/node_modules/canvaskit-wasm/bin/canvaskit.js:139:152)
    at Ga (/Users/softmarshmallow/Documents/Apps/bridged/nothing/node_modules/canvaskit-wasm/bin/canvaskit.js:139:200)
    at Ab (/Users/softmarshmallow/Documents/Apps/bridged/nothing/node_modules/canvaskit-wasm/bin/canvaskit.js:150:64) {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: 'https:/unpkg.com/canvaskit-wasm@0.25.0/bin/canvaskit.wasm'
}
failed to asynchronously prepare wasm: RuntimeError: abort(Error: ENOENT: no such file or directory, open 'https:/unpkg.com/canvaskit-wasm@0.25.0/bin/canvaskit.wasm'). Build with -s ASSERTIONS=1 for more info.
RuntimeError: abort(Error: ENOENT: no such file or directory, open 'https:/unpkg.com/canvaskit-wasm@0.25.0/bin/canvaskit.wasm'). Build with -s ASSERTIONS=1 for more info.
    at Ma (/Users/softmarshmallow/Documents/Apps/bridged/nothing/node_modules/canvaskit-wasm/bin/canvaskit.js:149:56)
    at Ab (/Users/softmarshmallow/Documents/Apps/bridged/nothing/node_modules/canvaskit-wasm/bin/canvaskit.js:150:136)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions