Je suis la suite de ce tutoriel pour configurer le regroupement pour le web à partir d'un Réagir composant Natif.
Je suis avec succès le regroupement à l'aide de la webpack config dans le tutoriel, mais quand je suis à l'importation l'exportation Bouton dans un projet React et d'essayer de le rendre, j'obtiens l'erreur suivante dans le navigateur:
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
Ci-dessous est le Réagissent composant Natif je suis le regroupement sur le site 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,
},
});
Ce sont les versions des paquets que j'utilise le bundle Réagir composant Natif avec:
"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",