After RN & Expo update web version fails

[tomas223]

Describe the bug
After updating Expo to v44 I started to get following bugs on Web version that stops app from starting. Apps works without any issues in Android & iOs. I was not able to monkey-patch it, though I'm not saying it's not possible.

Web Bundling complete 11408ms
./node_modules/react-native/Libraries/vendor/emitter/_EventEmitter.js:68:10
"export 'default' (imported as 'EmitterSubscription') was not found in './_EmitterSubscription'
  66 |     return (this._subscriber.addSubscription(
  67 |       eventType,
> 68 |       new EmitterSubscription(this, this._subscriber, listener, context),
     |          ^
  69 |     ): any);
  70 |   }
  71 |
./node_modules/react-native/Libraries/Performance/Systrace.js:216:3
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
  214 |   // with numeric IDs
  215 |   // TODO(davidaurelio) Scan polyfills for dependencies, too (t9759686)
> 216 |   (require: $FlowFixMe).Systrace = Systrace;
      |   ^
  217 | }
  218 |
  219 | module.exports = Systrace;

And this in web console.log:

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
    at Module.<anonymous> (_EmitterSubscription.js:60:1)
    at Module../node_modules/react-native/Libraries/vendor/emitter/_EmitterSubscription.js (_EmitterSubscription.js:60:1)
    at __webpack_require__ (bootstrap:789:1)
    at fn (bootstrap:100:1)
    at Module.<anonymous> (_EventEmitter.js:12:1)
    at Module../node_modules/react-native/Libraries/vendor/emitter/_EventEmitter.js (_EventEmitter.js:173:1)
    at __webpack_require__ (bootstrap:789:1)
    at fn (bootstrap:100:1)
    at Module../node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js (EventEmitter.js:14:1)
    at __webpack_require__ (bootstrap:789:1)
    at fn (bootstrap:100:1)
    at Module.<anonymous> (Dimensions.js:11:1)
    at Module../node_modules/react-native/Libraries/Utilities/Dimensions.js (Dimensions.js:142:1)
    at __webpack_require__ (bootstrap:789:1)
...

To Reproduce
Steps to reproduce the behavior:

1. Codes:

import AutoHeightImage from "react-native-auto-height-image";
...
            <AutoHeightImage
              resizeMode="contain"
              width={200}
              source={{ uri: uri }}
            />
...

2. Start Expo app and then web version
3. Wait for error in console & web console

Expected behavior
App is expected to run

Dependencies versions (please complete the following information):

• "react": "17.0.1",
• "react-native": "https://github.com/expo/react-native/archive/sdk-44.0.0.tar.gz",
• "react-native-web": "0.17.1",
• "react-native-auto-height-image": "^3.2.3",

[tomas223]

At the end I ended up creating my own component for web. It's not tested for all use cases, but worked for me.

import { useState } from "react";
import { Image, ImageProps, ImageStyle, StyleProp } from "react-native";

interface TSource {
  uri: string;
}

export type Props = {
  source: TSource;
  width: number;
  resizeMode: ImageProps["resizeMode"];
  style?: StyleProp<ImageStyle>;
};

const MyAutoHeightImage = ({ style, width, source, resizeMode }: Props) => {
  const [height, setHeight] = useState(0);

  const updateImageHeight = () => {
    Image.getSize(source.uri, (imgWidth, imgHeight) => {
      const ratio = imgWidth / imgHeight;
      setHeight(width / ratio);
    });
  };

  return (
    <Image
      style={[style, { width: `${width}px`, height: `${height}px` }]}
      width={width}
      source={source}
      resizeMode={resizeMode}
      onLoad={updateImageHeight}
    />
  );
};

export default MyAutoHeightImage;