configure skia with react native storybook web

[YOEL311]

I try to use it with skin in my components project

but I got an error when I came to the web

Error: Cannot read properties of undefined (reading 'Matrix')
  at new JsiRenderNode (/vendors-node_modules_shopify_react-native-skia_lib_module_index_js.iframe.bundle.js:1408:29))
  at new GroupNode (/vendors-node_modules_shopify_react-native-skia_lib_module_index_js.iframe.bundle.js:881:5))
  at JsiSkDOM.Group (/vendors-node_modules_shopify_react-native-skia_lib_module_index_js.iframe.bundle.js:933:120))
  at new Container (/vendors-node_modules_shopify_react-native-skia_lib_module_index_js.iframe.bundle.js:5355:26))
  at new SkiaRoot (/vendors-node_modules_shopify_react-native-skia_lib_module_index_js.iframe.bundle.js:5776:22))
  at /vendors-node_modules_shopify_react-native-skia_lib_module_index_js.iframe.bundle.js:5267:69
  at mountMemo (/vendors-node_modules_babel_runtime_helpers_asyncToGenerator_js-node_modules_babel_runtime_hel-6ba1b4.iframe.bundle.js:41175:19))
  at Object.useMemo (/vendors-node_modules_babel_runtime_helpers_asyncToGenerator_js-node_modules_babel_runtime_hel-6ba1b4.iframe.bundle.js:41620:16))
  at useMemo (/vendors-node_modules_babel_runtime_helpers_asyncToGenerator_js-node_modules_babel_runtime_hel-6ba1b4.ifram

I reproduce this error in the repo

https://github.com/YOEL311/storybookPublic
reproduce step

git clone
cd
git switch main
yarn
yarn storybook

I tried all ways from this page but I already get the error
https://shopify.github.io/react-native-skia/docs/getting-started/web

Can you please provide me with a working example of Skia in React Native CLI (not Expo)?

[renanmav]

I was able to setup skia web for @storybook/react-native-web-vite following these docs:

1. yarn setup-skia-web will create web/static/js/canvaskit.wasm
2. add ../web to staticDirs inside .storybook/main.ts
3. alias AssetRegistry from react-native to react-native-web inside .storybook/main.ts > viteFinal.config.resolve.alias

'react-native/Libraries/Image/AssetRegistry': path.resolve(
  __dirname,
  '..',
  'node_modules',
  'react-native-web/dist/modules/AssetRegistry',
),

4. add the following snippet to load skia web inside .storybook/preview.ts

import {LoadSkiaWeb} from '@shopify/react-native-skia/lib/module/web';
LoadSkiaWeb({
  locateFile: file => `/static/js/${file}`,
});

Don't forget to check http://localhost:6006 > dev tools > console and sources to troubleshoot. 😉