ReferenceError: SkiaViewApi is not defined in React Native Web w/ react-native-skia 1.8.0

[Bartozzz]

Description

I am making an Expo application meant to work on iOS, Android, and the Web. I tried bumping react-native-skia to the latest version to leverage the new sampling property, but when running the application on the web, it throws:

ReferenceError: SkiaViewApi is not defined

After further investigation, I've noticed that this pull-requests causes the error, especially: https://github.com/Shopify/react-native-skia/pull/2854/files#diff-628ba71b9ce2651cb45c9b0db8670f682532fe11fff3bb7b483b1f6b82dac43cR106. It looks like it tries to call a method on a global object (SkiaViewApi) but this object is not defined in the Expo Web environment.

For now I'll roll back to "@shopify/react-native-skia": "1.5.0" as it is the recommended compatible version by Expo, but just wanted to let you know that releases >=1.8.0 seem to not be compatible with Expo Web/React Native for web.

React Native Skia Version

1.8.0

React Native Version

0.76.6

Using New Architecture

• Enabled

Steps to Reproduce

• Create a clean Expo project with web support
• Add Skia using the official documentation
• Run the project

Snack, Code Example, Screenshot, or Link to Repository

.

[Snoozy]

Hitting this as well when using react-native-web and expo!

[izakfilmalter]

Getting the same error. Seems like 1.7.6 works, but 1.7.7 doesn't.

[nathan-ahn]

Reproducible using the Hello Snack in the docs on v1.11.4. (Here's a Snack on v1.11.4 with the error)

This issue does not seem to exist using Next.js with React Native Web nor Storybook.

[sdcooke]

I've investigated this a bit and think it may be related to how metro handles globals, and that would explain why it doesn't happen in Next and Storybook (I have a vite-based project that doesn't have the issue). It seems to happen at bundle time, not runtime, so it's quite hard to work around it!

For now because I don't need skia in the web version of my app (I'm only including a couple of screens), so I have added this to my metro config:

config.resolver.resolveRequest = (context, moduleName, platform) => {
  if (platform === "web" && moduleName === "@shopify/react-native-skia") {
    return context.resolveRequest(context, `${__dirname}/src/components/skia.web.ts`, platform);
  }
  return context.resolveRequest(context, moduleName, platform);
};

where skia.web.ts is just:

export const Canvas = () => null;

Obviously not a proper solution but adding it here in case it helps anyone.

[nathan-ahn]

Seems like @wcandillon implemented a related fix in #2945 (Container.ts). However, this still seems to be broken in v1.11.5, so there's likely other global declarations still missing for SkiaViewApi.