Estoy siguiendo este tutorial para configurar la agrupación para la web de un Reaccionan componente Nativo.
Estoy con éxito agrupación mediante el webpack config en el tutorial, sin embargo cuando puedo importar exportar Botón en un proyecto React y tratan de hacerla, me sale el siguiente error en el navegador:
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
A continuación es el de Reaccionar componente Nativo estoy liando web:
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,
},
});
Estas son las versiones de los paquetes que estoy utilizando para el paquete de los de Reaccionar componente Nativo con:
"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",