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/[email protected]/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/[email protected]/bin/canvaskit.js"></script>
CanvasKitInit({
     locateFile: (file) => 'https://unpkg.com/[email protected]/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/[email protected]/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/[email protected]/bin/canvaskit.wasm'
}
failed to asynchronously prepare wasm: RuntimeError: abort(Error: ENOENT: no such file or directory, open 'https:/unpkg.com/[email protected]/bin/canvaskit.wasm'). Build with -s ASSERTIONS=1 for more info.
RuntimeError: abort(Error: ENOENT: no such file or directory, open 'https:/unpkg.com/[email protected]/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

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions