Babel Décorateurs transform, obtenir en permanence jeton inattendu (avec projet REACT), peu importe ce que j'essaie

Question

je l'ai fait une bonne quantité de la recherche par Stacko essayant de trouver une réponse mais je continue à venir avec la même erreur, unexpected token

Chaque fois que j'utilise le translateur de texte pour corriger l'erreur, le problème est toujours le même dans mon composant.

Mon erreur est la suivante:

./src/components/pages/projectpages/dnd2/Card.js 
Syntax error: Unexpected token (71:0) 

    69 | }; 
    70 | 
> 71 | @DropTarget(ItemTypes.CARD, cardTarget, connect => ({ 
    |^
    72 | connectDropTarget: connect.dropTarget(), 
    73 | })) 
    74 | @DragSource(ItemTypes.CARD, cardSource, (connect, monitor) => ({ 

et voici comment je l'ai dans mon installation package.json (et je l'ai essayé étape 1 sans succès non plus)

{ 
    "name": "my-app", 
    "version": "0.1.0", 
    "babel": { 
    "plugins": [ 
     "transform-decorators" 
    ] 
    }, 
    "stage": 0, 
    "private": true, 
    "dependencies": { 
    "babel-plugin-transform-class-properties": "^6.24.1", 
    "babel-plugin-transform-decorators-legacy": "^1.3.4", 
    "date-fns": "^1.28.5", 
    "dragula": "^3.7.2", 
    "flexbox-react": "^4.3.3", 
    "moment": "^2.18.1", 
    "moment-timezone": "^0.5.13", 
    "react": "^15.6.1", 
    "react-css-transition-replace": "^2.2.1", 
    "react-dnd": "^2.4.0", 
    "react-dnd-html5-backend": "^2.4.1", 
    "react-dom": "^15.6.1", 
    "react-dragula": "^1.1.17", 
    "react-fa": "^4.2.0", 
    "react-flexbox-grid": "^1.1.3", 
    "react-fontawesome": "^1.6.1", 
    "react-image-compare": "0.0.1", 
    "react-jsonschema-form": "^0.49.0", 
    "react-modal": "^1.9.4", 
    "react-moment": "^0.2.4", 
    "react-router-dom": "^4.1.1", 
    "react-toggle-display": "^2.2.0", 
    "react-transition-group": "^1.2.0", 
    "simple-react-forms": "^1.3.0", 
    "styled-components": "^1.4.6", 
    "styled-props": "^0.2.0" 
    }, 
    "devDependencies": { 
    "babel-plugin-transform-decorators": "^6.24.1", 
    "babel-plugin-transform-decorators-legacy": "^1.3.4", 
    "react-scripts": "1.0.7" 
    }, 
    "scripts": { 
    "start": "react-scripts start", 
    "build": "react-scripts build", 
    "test": "react-scripts test --env=jsdom", 
    "eject": "react-scripts eject" 
    } 
} 

Qu'est-ce que D'autre ai-je manqué ici?

Answer 1

Dans votre fichier package.json

"babel": { 
    "plugins": [ 
    "transform-decorators" 
    ] 
}, 

doit être remplacé par

"babel": { 
    "plugins": [ 
    "transform-decorators-legacy" 
    ] 
}, 

Gardez à l'esprit que les décorateurs peuvent être écrits comme des fonctions JS simples.

@DropTarget(ItemTypes.CARD, cardTarget, connect => ({ 
connectDropTarget: connect.dropTarget(), 
})) 

est l'équivalent à

DropTarget(ItemTypes.CARD, cardTarget, connect => ({ 
connectDropTarget: connect.dropTarget(), 
}))(YourClassName) 

En d'autres termes, @ agit comme symbole (YourClassName) pour quelque classe qui vient après le décorateur.

Vous pouvez en savoir plus sur les décorateurs EcmaScript here.

EDIT:

Si vous souhaitez appliquer ou plusieurs de ceux-ci vous pouvez imbriquer comme celui-ci

DropTarget(...)(DragSource(...)(YourClassName)) 

ou comme celui-ci

const withDropTarget = DropTarget(...)(YourClassName) 
const withDragSource = DragSource(...)(withDropTarget) 
export default withDragSource 

ou utilisez un compose helper , ce qui vous permettrait d'écrire votre code comme ceci

const enhance = compose(
    DropTarget(...), 
    DragSource(...) 
) 

export default enhance(YourClassName)