The JS files are incompatible with Expo Web

[Kudo]

Description

For Expo Web, we don't transpile all modules in node_modules for bundling performance. We found a regression for react-native-skia between 0.1.141 to 0.1.155. the nullish coalescing operators don't be transpiled. it's not clear whether there's some change in react-native-skia or simply because the browserslist of react-native-builder-bob updates. unfortunately, expo web still use webpack 4 and webpack 4 doesn't support nullish coalescing operators even latest browsers support them.

node_modules/@shopify/react-native-skia/lib/module/animation/spring/useSpring.js in 0.1.141

export const useSpring = (toOrParams, config, callback) => useTiming(toOrParams, createSpringEasing(config !== null && config !== void 0 ? config : Spring.Config.Default), callback);

node_modules/@shopify/react-native-skia/lib/module/animation/spring/useSpring.js in 0.1.155

export const useSpring = (toOrParams, config, callback) => useTiming(toOrParams, createSpringEasing(config ?? Spring.Config.Default), callback);

hopefully you could have a custom babel config for react-native-builder-blob to transpile nullish coalescing operators to support expo web.

Version

0.1.155

Steps to reproduce

the issue is also reproducible on expo sdk 46 project.

$ yarn create expo-app -t blank@sdk-46 sdk46
$ cd sdk46
$ npx expo install react-native-web@~0.18.7 react-dom@18.0.0 @expo/webpack-config@^0.17.0
$ yarn add @shopify/react-native-skia@0.1.155
$ yarn setup-skia-web
$ npx expo start -w

add import { WithSkiaWeb } from '@shopify/react-native-skia/lib/module/web'; in App.js and reload the webpage, you should able to see the error in devtools.

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

this is the App.js i had in the repro above.

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { WithSkiaWeb } from '@shopify/react-native-skia/lib/module/web';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});