TypeError: __WEBPACK_IMPORTED_MODULE_1_styled_components_primitives ___ default.a.div n'est pas une fonction

Question

soutien

Primitifs (pour) des composants est passionnant ... style après l'installation je reçois cette erreur dans le navigateur:

TypeError: __WEBPACK_IMPORTED_MODULE_1_styled_components_primitives___default.a.div is not a function 
Object.__webpack_exports__.a 
src/App.js:13 
    10 | }) 
    11 | 
    12 | //const styled = styled.default; 
> 13 | const Body = styled.div` 

Cette erreur ne montre pas lorsque l'importation est défini pour importer style de 'style-composants' seulement quand il est configuré pour importer style de 'style-composants/primitives' voici le début du App.js (du début à la ligne d'erreur) fait après l'exécution de create-react -app.

app.js

import React from 'react' 
import styled from 'styled-components/primitives' 
import WebFont from 'webfontloader' 


WebFont.load({ 
    google: { 
    families: ['Bungee+Shade', 'Roboto', 'Nixie+One', 'Muli'] 
    } 
}) 

//const styled = styled.default; 
const Body = styled.div` 

Installer/s semble ok ???

yarn add styled-components react-primitives

yarn add v0.24.5 
[1/4] Resolving packages... 
[2/4] Fetching packages... 
warning fsevents@1.0.17: The platform "linux" is incompatible with this module. 
info "fsevents@1.0.17" is an optional dependency and failed compatibility check. Excluding it from installation. 
[3/4] Linking dependencies... 
[4/4] Building fresh packages... 
warning Your current version of Yarn is out of date. The latest version is "0.24.6" while you're on "0.24.5". 
info To upgrade, run the following command: 
$ npm upgrade --global yarn 
success Saved 2 new dependencies. 
├─ react-primitives@0.4.2 
└─ styled-components@2.1.0 
Done in 118.88s. 

Answer 1

styled-component/primitives utilise react-primitives sous le capot pour vous permettre de créer des composants vraiment réutilisables comme ceci:

const Wrapper = styled.View` 
    color: blue; 
` 

Ce composant <Wrapper /> peut maintenant être utilisé sur le web, dans ReactNative et peut même être rendu à Sketch! Comme vous pouvez le voir, j'ai écrit View ici, et non div. En effet, react-primitives a choisi d'utiliser un sous-ensemble des primitives ReactNative comme l'unité sous-jacente de la réutilisation, en particulier ces quatre API sont exportés sous forme de styled.Xstyled-components/primitives:

• styled.View: Un composant de base pour la mise en page.
• styled.Text: composant de base pour le rendu de texte.
• styled.Image: Composant de base pour le rendu d'image.
• styled.Touchable: Composant de base pour l'interaction.

Pour utiliser styled-components/primitives, vous devrez utiliser ces quatre primitives pour créer vos composants. Si vous souhaitez utiliser des balises HTML standard et ne construisez qu'une application Web, vous devez utiliser styled-components correctement, mais ces composants ne seront pas réutilisables sur ReactNative.

Pour en savoir plus sur styled-components/primitives lire notre announcement blogpost, pour plus d'informations sur react-primitives et pourquoi Leland a choisi ces API montre exactement his excellent talk from ReactEurope!