Skia Errors Preventing Next.JS from Compiling

[rohanrana-3630]

We have so far had nonstop issues trying to implement Skia in our Next.JS/Expo monorepo that is based on the Solito starter repo along with Tamagui. After many days of three developers running different experiments, we have got Skia working on Next.js only through the dev build, but it still causes many errors when trying to run an actual production build for Next.js. We have come a long way and we're looking for help to get this working once and for all so we can start building all the promised fanciness you advertise. We're all aboard the Skia train and happy to contribute where we can. Here are our discoveries so far:

• The latest version of your Skia package that works for us is 0.1.208. Beyond that, something with the canvaskit dependency causes the error below which we have never been able to make progress with:
• On 0.1.208, these are the layers of errors we have had to go through:
  • warn ../../node_modules/@shopify/react-native-skia/lib/module/external/reanimated/moduleWrapper.js Module not found: Can't resolve 'react-native-reanimated/package.json' in '/Users/X/Documents/GitHub/X/node_modules/@shopify/react-native-skia/lib/module/external/reanimated'
    • Our temporary fix for this was commenting out the try/catch block on lines 12-20 of the lib/module/external/reanimated/moduleWrapper.js file.
    • Despite this being a warning, it makes our build fail so calling it a warning is not correct.
    • We understand this warning is mentioned in this piece of documentation, but it's extremely unclear where these snippets of code are supposed to go. We have tried so many variations to no avail, the only one working for us being the CDN method.
  • Once we comment out the block above to bypass that error (not warning), we encounter a series of errors that correspond to multiple files needing import/export statements replaced with require()/module.exports:
    • lib/module/web/index.js
    • lib/module/skia/nativesetup
    • lib/module/Platform/index.js
    • lib/module/Platform/index.d.ts
  • Once we are done making these replacements, two things happen:
    • The next build still doesn't complete because of the following error:

TypeError: Cannot read properties of undefined (reading 'OS')
    at Object.<anonymous> (/Users/X/Documents/GitHub/X/node_modules/@shopify/react-native-skia/lib/module/skia/NativeSetup.js:4:14)
    at Module._compile (node:internal/modules/cjs/loader:1241:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at Module.require (node:internal/modules/cjs/loader:1115:19)
    at require (node:internal/modules/helpers:130:18)
    at Object.<anonymous> (/Users/X/Documents/GitHub/X/node_modules/@shopify/react-native-skia/lib/module/index.js:1:1)
    at Module._compile (node:internal/modules/cjs/loader:1241:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
> Build error occurred
Error: Failed to collect page data for /user
    at /Users/X/Documents/GitHub/X/node_modules/next/dist/build/utils.js:1158:15
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  type: 'Error'
}
- info Collecting page data .%

• But the cherry on top: the dev build also stops working with this error
  • 

Any guidance on how we should proceed would be super appreciated!

Steps to reproduce ⁃ Start with the Solito starter pack ⁃ Add Skia 0.1.208 to the package.json in the apps/expo folder. ⁃ From the root, run "yarn install" ⁃ Start adding any pages with Skia content to the packages/app folder and referring to them from Next.js ⁃ From the apps/next folder, run "yarn run web". It should work. Any other version after 0.1.208 should not work with the error mentioned above. ⁃ From the apps/next folder, run "yarn run build". It should error out with the series of errors mentioned above.

OR we’re happy to get on a quick 15 mins call to show you our trials/tribulations on this (PAID)

[frontendschmacktend]

@wcandillon I'm the founder working on this project, we're heavily invested in this stack running Skia for web but have not been able to reach you through neither emails or these Github issues since starting to work on this.

It would be immensely helpful if you could point us in the right directions to stabilize this project running Skia on Next.js (through either the wasm or js version of canvaskit).

We're past this error to generate the build but upon starting the build itself, we're facing more issues. We created a skeleton repo here with instructions/screenshots how to replicate the issue.

https://github.com/frontendschmacktend/schmacktend-frontend

[wcandillon]

We revamped our web support at https://shopify.github.io/react-native-skia/docs/getting-started/web and fixed quite some issues there. It is very likely that it should work nicely for you now.

[wcandillon]

I'm closing it for now as we believe our new RN Web support and documentation should help a lot here but please let us know if we need to reopen here.