Error When Adding Text To Skia Web In My Project With Expo Router

[rarepython21]

Description

I am getting the following error when adding text to my RN Skia Web project which uses Expo Router:

Uncaught Error
_Image.default.resolveAssetSource is not a function

Here is my setup:

    //text setup:
    const fontSize = 32;
    const font = useFont(require('../fonts/Roboto-Light.ttf'), fontSize);

...

       <Text
          x={100}
          y={100}
          text={"test"}
          font={font}
          size={32}
          opacity={100}
        />

Version

0.1.172

Steps to reproduce

clone https://github.com/rarepython21/Skia-Text-Bug-w-Expo-Router

or

1. npx create-expo-app@latest -e with-router
2. skipped yarn add @shopify/react-native-skia or npm install @shopify/react-native-skia
3. expo install @shopify/react-native-skia
4. yarn setup-skia-web
5. npm install copy-webpack-plugin --save-dev
6. npm i node-polyfill-webpack-plugin
7. setup webpack.config.js as outlined below 8. yarn add react-native-level-fs
8. yarn add path-browserify
9. added "fs": "react-native-level-fs", "path": "path-browserify", to my dependencies in package.json
10. added skia to my index.js using code splitting
11. yarn add path-browserify again
12. got this Uncaught Error: Aborted(CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0). Build with -sASSERTIONS for more info.
13. used CDN
14. and add a Text object

webpack.config.js:

import CopyPlugin from "copy-webpack-plugin";
import NodePolyfillPlugin from "node-polyfill-webpack-plugin";
const newConfiguration = {
  ...currentConfiguration,
  plugins: [
    ...currentConfiguration.plugins,
    // 1. Make the wasm file available to the build system
    new CopyPlugin({
      patterns: [
        {
          from: "node_modules/canvaskit-wasm/bin/full/canvaskit.wasm",
        },
      ],
    }),
    // 2. Polyfill fs and path module from node
    new NodePolyfillPlugin()
  ],
  externals: {
    ...currentConfiguration.externals,
    // 3. Avoid warning if reanimated is not present
    "react-native-reanimated": "require('react-native-reanimated')",
    "react-native-reanimated/lib/reanimated2/core":
      "require('react-native-reanimated/lib/reanimated2/core')",
  },
}

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

https://github.com/rarepython21/Skia-Text-Bug-w-Expo-Router

[wcandillon]

12. seems to indicate that the wasm file wasn't found (despite the presence of the copy plugin). You can check if yourself in trying to access the wasm file via your local http url (http://localhost:3000/canvaskit.wasm) for instance.

[wcandillon]

@rarepython21 thank you for reporting this. We now support metro and expo-router in v0.1.240: https://shopify.github.io/react-native-skia/docs/getting-started/web#expo. I just tried it and it worked really well, let us know if you have any questions.