Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Annoying logs when loading canvaskit wasm #3

Open
softmarshmallow opened this issue Apr 13, 2021 · 0 comments
Open

Annoying logs when loading canvaskit wasm #3

softmarshmallow opened this issue Apr 13, 2021 · 0 comments

Comments

@softmarshmallow
Copy link
Member

softmarshmallow commented Apr 13, 2021

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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant