Does not work with Expo Router v50 and Metro Bundler for Web

[gabimoncha]

Description

Running expo run:web fails with Expo Router v50 and Metro bundler. Already tried to implement @kimchouard suggestions and they've got me over canvaskit.wasm file missing throwing expected magin word ...., but I still get this error now

Uncaught Error
Cannot read properties of undefined (reading 'Path')

When trying to create a clean and reproducible demo, I get this error

Static Rendering Error (Node.js)
window is not defined

Version

0.1.221

Steps to reproduce

Create a boilerplate if you don't have a codebase already

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

Install React Native Skia

expo install @shopify/react-native-skia

Create this script and add it to postinstall

Without this script, browser will return

// To be added in package.json "postinstall": "setup-skia-web && node [name-of-this-file].js"
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));

Load Skia

According to @kimchouard suggestions

import { WithSkiaWeb } from '@shopify/react-native-skia/lib/module/web';
...
  <WithSkiaWeb
        opts={{ locateFile: (file) => `static/js/${file}` }}
        getComponent={() => require('./path-to-component.tsx')}
        fallback={<Text>Loading Skia...</Text>}
      />

Link to a repository

Reproducing repo

Initial error screenshot

Reproducing repository screenshot

[lucas-garrido]

same issue here, we cant upgrade to sdk 50

[kimchouard]

Yes, it's linked to another fix I have in the pending PR, see this commit: https://github.com/Shopify/react-native-skia/pull/2176/commits/bb630e32044fcc611ad500555f39738ddad88185 .

You need to update the Platform.web.tsx file in your node_modules folder with this fix until the PR is merged: https://github.com/Shopify/react-native-skia/blob/bb630e32044fcc611ad500555f39738ddad88185/package/src/Platform/Platform.web.tsx#L119

This should solve the issue you're seeing. I'll close this issue tomorrow, unless this hasn't fixed the error for you.

[wcandillon]

@lucas-garrido @gabimoncha this is fixed in 0.1.240 now :)) I tried it and I liked it, hope you will too: https://shopify.github.io/react-native-skia/docs/getting-started/web#expo Let us know if you have any questions

[gabimoncha]

@william-candillon thank you! Currently when running npx expo install @shopify/react-native-skia it installs version 0.1.221 I can manually change the version, but is there a way to make expo take the latests stable one? Using expo 50.0.11

[wcandillon]

if you use web only or use expo dev-client you can safely use the rn skia version of your choice, if not we document the process at https://shopify.github.io/react-native-skia/docs/getting-started/web#expo (you would need indeed to patch 0.1.221