fix(🌍): Fix RN Web support

[wcandillon]

fixes #2914 #2943

This is based on the great example provided by @nathan-ahn (which we will have to merge separately unfortunately).

[github-actions]

🎉 This PR is included in version 1.11.6 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[daniel112]

I am now getting React is not defined

expo: 52.0.32
react-native-web: 0.19.13
react-native-skia: 1.11.6

[wcandillon]

@daniel112 let us know if you can share a reproduction with us

[daniel112]

@daniel112 let us know if you can share a reproduction with us

Sure thing @wcandillon
https://github.com/daniel112/skia-on-web-example

let me know if I'm missing something here

[daniel112]

it seems like it's the same error as #2941

if I modify the node_modules/@shopify/react-native-skia/lib/module/renderer/Canvas.js
with import React

import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from "react";

the app loads fine

[wcandillon]

yes indeed, I am trying to figure out why this is needed and if there is a way for us to enforce this so we can avoid these issues in the future. But regardless, I should be able to publish a fix for it tomorrow.

…

On Tue, Feb 11, 2025 at 9:50 PM Daniel Yo ***@***.***> wrote: it seems like it's the same error as #2941 <#2941> if I modify the ***@***.***/react-native-skia/lib/module/renderer/Canvas.js with import React import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from "react"; the app loads fine — Reply to this email directly, view it on GitHub <#2954 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACKXVTFVWPHR62TPXJ7AIL2PJPCLAVCNFSM6AAAAABWXTHH6SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNJSGAZTOOJVGM> . You are receiving this because you were mentioned.Message ID: ***@***.***> [image: daniel112]*daniel112* left a comment (Shopify/react-native-skia#2954) <#2954 (comment)> it seems like it's the same error as #2941 <#2941> if I modify the ***@***.***/react-native-skia/lib/module/renderer/Canvas.js with import React import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from "react"; the app loads fine — Reply to this email directly, view it on GitHub <#2954 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACKXVTFVWPHR62TPXJ7AIL2PJPCLAVCNFSM6AAAAABWXTHH6SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNJSGAZTOOJVGM> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[wcandillon]

I understand the issue more holistically now, will publish a fix for it tomorrow, thank you for the repro On Tue, Feb 11, 2025 at 9:55 PM William Candillon ***@***.***> wrote:

…

yes indeed, I am trying to figure out why this is needed and if there is a way for us to enforce this so we can avoid these issues in the future. But regardless, I should be able to publish a fix for it tomorrow. On Tue, Feb 11, 2025 at 9:50 PM Daniel Yo ***@***.***> wrote: > it seems like it's the same error as #2941 > <#2941> > > if I modify the > ***@***.***/react-native-skia/lib/module/renderer/Canvas.js > with import React > > import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from "react"; > > the app loads fine > > — > Reply to this email directly, view it on GitHub > <#2954 (comment)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AACKXVTFVWPHR62TPXJ7AIL2PJPCLAVCNFSM6AAAAABWXTHH6SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNJSGAZTOOJVGM> > . > You are receiving this because you were mentioned.Message ID: > ***@***.***> > [image: daniel112]*daniel112* left a comment > (Shopify/react-native-skia#2954) > <#2954 (comment)> > > it seems like it's the same error as #2941 > <#2941> > > if I modify the > ***@***.***/react-native-skia/lib/module/renderer/Canvas.js > with import React > > import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from "react"; > > the app loads fine > > — > Reply to this email directly, view it on GitHub > <#2954 (comment)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AACKXVTFVWPHR62TPXJ7AIL2PJPCLAVCNFSM6AAAAABWXTHH6SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNJSGAZTOOJVGM> > . > You are receiving this because you were mentioned.Message ID: > ***@***.***> >

[daniel112]

I understand the issue more holistically now, will publish a fix for it
tomorrow, thank you for the repro

Thanks for the prompt response!

[daniel112]

is the core issue just a discrepancy between how skia gets compiled into web?