Unable to launch on latest Expo web.

[Vali-98]

Description

Installation of react-native-skia with latest version of Expo SDK 49 results in in a wasm validation error when attempting to use a <Canvas />

When using CDN, the fetch fails:

Version

0.1.196

Steps to reproduce

Following steps from: https://shopify.github.io/react-native-skia/docs/getting-started/web/

# Create Expo Boilerplate

npx create-expo-app@latest --template tabs@49

# Install skia and apply web fix
expo install @shopify/react-native-skia
yarn setup-skia-web

Added postinstall.js as a postinstall script:

const fs = require('fs');
const path = require('path');

const packageJsonPath = path.join(__dirname, 'node_modules', 'canvaskit-wasm', 'package.json');
const packageJson = require(packageJsonPath);

packageJson.browser = {
  fs: false,
  path: false,
  os: false,
};

fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));

Snack, code example, screenshot, or link to a repository

Similar repo here:

https://github.com/kimchouard/rn-skia-metro-web-example

[kimchouard]

@Vali-98 Couple of things:

• When you run the automatic skia web setup, make sure to list the proper static file folder: yarn setup-skia-web "public" -> By default, it's set up for Webpack with the web folder, but with metro the static folder is public.
• Did you added the yarn setup-skia-web script as well to your postinstall script in your package.json?
  -> Both should be in there: "postinstall": "yarn setup-skia-web \"public\" && postinstall.js"

[kimchouard]

FYI I'm working on updating the docs to make this more clear and avoid such issues when getting started with metro. See #2017

[wcandillon]

@Vali-98 we just released improvements to our expo support: https://shopify.github.io/react-native-skia/docs/getting-started/web#expo let us know if you are still running such issues