Error when using canvaskit on web - Cannot read properties of null (reading 'rangeMin')

[kylegwalsh]

Description

On Mac M1, I'm encountering a very strange error when running the web version of my react-native application. Canvaskit-wasm seems to be erring after successfully loading and showing the Skia SVG I created.

Important versions:

"expo": "~48.0.18",
"@shopify/react-native-skia": "0.1.193",

Other information that may be relevant:

• I'm using expo's metro bundler rather than webpack
• To avoid errors with path and fs, I followed these instructions to modify the canvaskit-wasm node_module (this seemed to resolve the original errors I was encountering)

The error is...

Uncaught TypeError: Cannot read properties of null (reading 'rangeMin')
    at Pb (canvaskit.js:248:320)
    at canvaskit.wasm:0x3dcb2
    at canvaskit.wasm:0x299074
    at canvaskit.wasm:0x5bc7cb
    at canvaskit.wasm:0x117bcd
    at Object._MakeGrContext (canvaskit.js:187:52)
    at a.MakeWebGLContext (canvaskit.js:17:268)
    at a.MakeWebGLCanvasSurface (canvaskit.js:20:230)
    at SkiaView.onLayoutEvent (SkiaBaseWebView.js:68:33)
    at Platform.web.js:23:28
    at sentryWrapped (helpers.js:90:17)

I'm loading Skia by doing the following...

import { WithSkiaWeb } from '@shopify/react-native-skia/lib/module/web';

import { ProgressTileFallback } from './ProgressTileFallback';

export const ProgressTile = () => {
  return (
    <WithSkiaWeb
      // @ts-expect-error
      getComponent={() => import('./ProgressTileMain')}
      fallback={<ProgressTileFallback />}
    />
  );
};

After doing additional testing, it seems like I get the error even if I just render the <Canvas/> in the actual component (I normally use various Groups and Paths...

import { Canvas } from '@shopify/react-native-skia';
import React from 'react';

// ---------------------- START MAIN ---------------------- //
/** Renders a chart-like tile that shows a user's progress towards some numerical goal */

const ProgressTileMain = () => {
  return (
    <Canvas
      style={{
        width: 200,
        height: 200,
      }}
    />
  );
};
// ---------------------- END MAIN ---------------------- //

export default ProgressTileMain;

The strangest part is that it looks like my Skia component loads correctly for a second and then crashes with the above error. Afterwards, I can only see the frowny face in the UI.

I will try to create a reproducible example, but thought I'd post my thoughts first in case the answer is obvious.

Version

0.1.193

Steps to reproduce

1. Install the relevant packages

"expo": "~48.0.18",
"@shopify/react-native-skia": "0.1.193",

2. Set up skia for web

yarn setup-skia-web

3. Create a basic import with <WithSkiaWeb/> and <Canvas/>

4. Try to run the application on web (may only happen on M1 Mac's?)

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

Working version (a second before crash)

Erring version

[wcandillon]

This is very strange. Which browser are you using?
Can you double check that the wasm file is matching with the canvaskit.js file. This is a common issue when upgrading.

Is there a small reproducible example (as a small repository maybe) you could share with us?

[kylegwalsh]

Hey @wcandillon, thanks for your reply.

I'm using Google Chrome. How would I verify the wasm version matches the canvaskit.js file?

I've also experimented with a few different scenarios and gotten mixed results. Let me know if you have any recommendations for further tests I can run or how I should proceed.

1. I tried downgrading back to "@shopify/react-native-skia": "0.1.172" (this version is technically the one that expo 48 prefers) and loaded the wasm via the CDN

opts={{ locateFile: (file) => `https://cdn.jsdelivr.net/npm/canvaskit-wasm@${version}/bin/full/${file}` }}

This method seems to randomly cause the following error, but does work for the most part (I was also experiencing this error before I upgraded). I thought that upgrading skia and loading the wasm locally may help alleviate the issue, but that may be wishful thinking.

Error {name: 'BindingError', message: 'Expected null or instance of Path, got an instance of Path', stack: 'BindingError: Expected null or instance of Path, g…bundle?platform=web&dev=true&hot=false:168654:19)', __sentry_captured__: true}

2. I created a reproducible example that shows the error with the local wasm via yarn setup-skia-web, but the error is different from the one I originally mentioned on this issue (it complains about the magic word).

canvaskit.js:168 Uncaught RuntimeError: Aborted(CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0). Build with -sASSERTIONS for more info.
    at Na (canvaskit.js:168:75)
    at canvaskit.js:267:428

From other issues posted on github, it sounds like this could be due to a mismatch in the wasm file, but this is a brand new repo and should have the latest wasm file.

[wcandillon]

WebAssembly.instantiate(): expected magic word 00 61 73 6d definitely means that the wasm and js file are not matching.

[kylegwalsh]

Is there any way to verify which version is being loaded by each? The reproducible example calls yarn setup-skia-web from scratch so it can't have an old outdated version.

[wcandillon]

I'm closing this issue as it seems to be related to the wasm file not matching.

[YOEL311]

Hey @wcandillon, I encountered the same error and created a repository to reproduce it. I tried the solution in this commit, but the error persisted.

I have created a new issue and included all the necessary steps to reproduce it.
#2426