[WEB] Uncaught (in promise) RuntimeError: Aborted(CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0). Build with -sASSERTIONS for more info.

[avencat]

Description

Hi! First of all, thank for this great library! I'm trying to add react-native-web to my project and I have some issues regarding @shopify/react-native-skia and more particularly canvaskit-wasm:

Version

0.1.149

Steps to reproduce

npx react-native init MyAppName --template @criszz77/luna
yarn add @shopify/react-native-skia

And follow this documentation: https://shopify.github.io/react-native-skia/docs/getting-started/web/#manual-webpack-installation

I also added:

  config.resolve.fallback = {
    fs: false
  }

to my config as it seems that NodePolyfillPlugin doesn't polyfill fs

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

Here is my config-overrides.js file:

const {
  override,
  addBabelPlugins,
  addExternalBabelPlugins,
  addWebpackPlugin,
  addWebpackAlias
} = require('customize-cra');

const CopyPlugin = require('copy-webpack-plugin');
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');

const {DefinePlugin} = require('webpack');
const path = require('path')

function myOverrides(config) {
  config.resolve.fallback = {
    fs: false
  }

  return config
}

module.exports = override(
  myOverrides,
  ...addBabelPlugins('babel-plugin-react-native-web'),
  ...addExternalBabelPlugins(
    [
      'module-resolver',
      {
        alias: {
          '@AppRoot': './src/App.tsx'
        },
        extensions: [
          '.js',
          '.jsx',
          '.tsx',
          '.ts',
          '.ios.js',
          '.android.js',
          '.ios.tsx',
          '.ios.ts',
          '.android.tsx',
          '.android.ts',
          '.native.js',
          '.native.ts',
          '.native.tsx',
          '.json'
        ],
        root: ['./src']
      }
    ],
    'react-native-web',
    [
      // Enable new JSX Transform from React
      '@babel/plugin-transform-react-jsx',
      {
        runtime: 'automatic',
      },
    ],
    ['@babel/plugin-proposal-decorators', {legacy: true}],
    ['@babel/plugin-proposal-class-properties', {loose: true}],
    ['@babel/plugin-proposal-private-methods', {loose: true}],
    ['@babel/plugin-proposal-private-property-in-object', {loose: true}],
  ),
  addWebpackPlugin(
    new DefinePlugin({
      // `process.env.NODE_ENV === 'production'` must be `true` for production
      // builds to eliminate development checks and reduce build size. You may
      // wish to include additional optimizations.
      'process.env.NODE_ENV': JSON.stringify(
        process.env.NODE_ENV || 'development',
      ),
      __DEV__: process.env.NODE_ENV !== 'production',
    }),
  ),
  addWebpackPlugin(
    // 1. Make the wasm file available to the build system
    new CopyPlugin({
      patterns: [
        {
          from: "node_modules/canvaskit-wasm/bin/full/canvaskit.wasm",
        },
      ],
    }),
  ),
  addWebpackPlugin(
    // 2. Polyfill fs and path module from node
    new NodePolyfillPlugin({ includeAliases: ['path'] })
  ),
  addWebpackAlias({
    ['@AppRoot']: path.resolve(__dirname, './src/App.tsx')
  })
);

And my index.tsx:

/**
 * When compiling for web, it will search for index.js on root/src.
 */
import 'react-native-gesture-handler';
// Notice the import path `@shopify/react-native-skia/lib/module/web`
// This is important only to pull the code responsible for loading Skia.
// @ts-expect-error web plugin not find by typescript
import {LoadSkiaWeb} from '@shopify/react-native-skia/lib/module/web';
import {createRoot} from 'react-dom/client';

import App from '@AppRoot';
import reportWebVitals from './reportWebVitals';

// RNVI integration for web
import './icons';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement!);
LoadSkiaWeb().then(() => root.render(<App />));

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

[wcandillon]

This means that the wasm is not found or at the wrong version. Are you using expo with yarn setup-skia-web? If yes you need to run the script again. Based on the config you sent, can you double check that the wasm file is resolved and the right version of the file is used?

[avencat]

I'm not using expo, do I need to run the script anyway? And how can I check that the wasm file is resolved please? By importing it in my code and log it?

[avencat]

It's working if I use the CDN => https://shopify.github.io/react-native-skia/docs/getting-started/web/#using-a-cdn but not when I'm not passing any parameters to LoadSkiaWeb… :/ I can use it like this but I don't really understand why I'm not able to make it work, I'm putting a repo to demonstrate the error, I'll attach the link

[avencat]

Here is the repo link: https://github.com/avencat/react-native-skia-web

[avencat]

Ok so, I ran yarn setup-skia-web, it copied the file in a web directory, I then ran yarn web it still didn't work so I copied the content of web into my public directory and now it's working as expected, so for me this issue is resolved but I'm not sure if these steps are mentioned in the documentation?

[wcandillon]

We mentioned the steps at https://shopify.github.io/react-native-skia/docs/getting-started/web#manual-webpack-installation do you think that things could be clarified there? if yes, please let us know.

[wcandillon]

Closing this issue for now, please feel free to reopen it if you have suggestions on how the documentation could be improved on that regard.

[bjollans]

For anyone else coming across this issue. What worked for me was to explicitly set the canvaskit.wasm file with opts={{ locateFile: (file) => '/web/static/js/canvaskit.wasm' }} like so:

    <WithSkiaWeb 
      opts={{ locateFile: (file) => `/web/static/js/canvaskit.wasm` }}
      getComponent={() => require('your component')}
      fallback={<Text>Loading Skia...</Text>}
    />