त्रुटि जब bundling के लिए वेब से एक देशी प्रतिक्रिया घटक का उपयोग कोलाहल-प्लगइन-प्रतिक्रिया देशी-वेब

मैं पालन कर रहा हूँ इस ट्यूटोरियल स्थापित करने के लिए bundling के लिए वेब से एक देशी प्रतिक्रिया घटक है ।

मैं सफलतापूर्वक बंडलिंग का उपयोग कर webpack विन्यास ट्यूटोरियल से, हालांकि जब मैं आयात निर्यात बटन में एक प्रतिक्रिया परियोजना और कोशिश करते हैं और इसे प्रस्तुत करना, मैं निम्नलिखित त्रुटि मिलती ब्राउज़र में:

TypeError: Failed to construct 'Image': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

renderWithHooks
./node_modules/react-dom/cjs/react-dom.development.js:14803

  14800 |   }
  14801 | }
  14802 | 
> 14803 | var children = Component(props, secondArg); // Check if there was a render phase update
        | ^  14804 | 
  14805 | if (workInProgress.expirationTime === renderExpirationTime) {
  14806 |   // Keep rendering in a loop for as long as render phase updates continue to

नीचे है प्रतिक्रिया देशी घटक मैं हूँ bundling के लिए वेब:

import React from "react";
import { TouchableOpacity, StyleSheet, Text } from "react-native";

export default function Button({ onPress, imageSource }) {
  return (
    <TouchableOpacity style={styles.button} onPress={onPress}>
      <Text>
        A
        </Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  container: {
    width: 56,
    height: 56,
    borderRadius: 28,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#fff",
  },
  image: {
    width: 28,
    height: 28,
  },
});

इन संस्करणों के संकुल मैं कर रहा हूँ का उपयोग कर बंडल बनाने के लिए देशी प्रतिक्रिया घटक के साथ:

"babel-plugin-react-native-web": "^0.17.5",
"metro-react-native-babel-preset": "^0.66.2",
"webpack": "^5.64.2",
"webpack-cli": "^4.9.1",
"babel-loader": "^8.2.3",